✨ Completed application link ✨
- Step 1 🐾: Serve and fetch JSON
- Step 2 🐾: Display the data & add base vars
- Step 3 🐾: Resize images
- Step 4 🐾: Responsive grid
- Step 5 🐾: Filter and sort
- Step 6 🐾: Style
- Final Step: "Refactor & Semantic HTML"
- ✅ Review assignment, plan rough outline of steps-to-completion
- ✅ Setup directory, Github repo, and hosting
trips.jsonfor mock API requests - ✅ Display the data, extend directory and set JS & CSS base variables
- ✅ Resize images
- ✅ Wireframe responsive grid
- ✅ Filter and sort
- ✅ Ad hoc design implementation
- ✅ Performant refactor and review
- ✅ Accessibility & semantic HTML refactor and review
- ✅ Final touches & repo documentation review.
- ...🟡 ⭐️ Bonus enhancements
- Performant enhancements
- Animated popup for listings...
- Mock delay & loader.
The data this application is build around, uses a provided trips.json file. However, I wanted to serve the trips.json resource externally, just to mock out an API request flow for the application.
I used a Google Cloud Storage Bucket to host and serve the file, and on the client-side, I used used the Fetch API to retrieve the data and convert it into a usable javaScript object.
When setting up the foundation for this app. I wanted to make sure I had a reference to quickly change any base variables that may need to be changed at a later point. For CSS, I created css/vars.css to be the "source of truth" for site-wide colors, spaces, sizes, fonts and other vars to maintain.
For javascript, I created the file js/app.js to be the root trigger for any client-side events, handling initial onload events in addition to other ui events and routing if necessary.
With a helpful hint from the Code Challenge directions, I was able to tinker with the image url and discover that adding width, height and specifying my desired size of image, allowed me to scale my images smaller for the frontend to load quickly!
- Here is the completed query parameter that was appended:
?height=200&width=356.
Note: While I was messing around with the scaling endpoint. I did discover that a few images didn't fit the 200/356 ratio. However they were only off by a few pixels, so I excepting "pinching" and "pulling" for this use-case.
- But, something to consider down the road.
I struggled a bit with this step. Getting the listings into columns wasn't too tricky. However, because the items needed to be sorted by date, reordering the columns with CSS would put them out of order. There may be a way, but I elected to use JS event to re-order the columns on LG - MD - SM break points.
Because of limited unit style filter types(4), I decided to go with a discovery UI. Clicking a filter when all filters are selected result in only the unit style selected showing in the listings. However, select another and that unit style is added to the listings, showing two types.
I'd read on the directions that React + Typescript is used on internal projects. However, my depth of knowledge with typescript is limited, so I opted to keep it as close to native javaScript so it'd be ready to update to React or any other framework.
- A list of resources can be found in the Resources.md file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent