├─ public // Static assets.
├─ src
│ ├─ assets // Assets such as images or font files.
│ ├─ components // Universal Vue components.
│ ├─ router // View's routers config.
│ ├─ services // API's
│ ├─ store // Vuex store modules.
│ ├─ utils // Code Helpers
│ └─ views // Pages.
├─ tests // Vue Test Utils Suite
| Package | NPM |
|---|---|
| vue- |  |
| vue-router |  |
| vuex | |
| vue-cli | |
| tailwind | |
You can check our demo here: https://wonderful-goldstine-f1701e.netlify.app/
You can check our repository here: https://github.com/LeoDiBlack/vue-reddit
The core of the app uses:
- Vue 2
- Vue Router - I intended to use multiple views in order to reflect multiple features from the Reddit API such as User Panel and multiple subs selectors.
- Vuex - For State Management
- Tailwind CSS - For quick, stable and scalable styling
- ESLint - Along with The Airbnb rules for code standards
- SASS - For Custom Styles without adding new rules to Tailwind Custom Set
Current build was splitted into two sessions:
- A first one of 5 hours for project settings, configurations and foundations for the different modules, also reusing some other files from previous projects in order to speed up development process. Once the initial skeleton was ready and the endpoint was properly being handled I moved into the next session.
- Second session of another 5 consisted of styling, responsive fixes, animations, deep logic involving the reddit pagination service (also testing its documentation) a code polish as well.
Once all the elements were linked and the requirement checklist was fulfilled (based also on the provided video) the deployment process was connected to netlify (from GitHub to Netlify) in order to provide a live demo version for the product.
You will see that there are several code sections that could be upgraded, ESLint rules helps us to deliver readable code while also implementing good practices but there are two scenarios where I needed to avoid the ESLint in order to hit the delivery time.
I saw that on the example video there wasn't a pagination option but the requirements asked for this one, based on this and based on the video at the beginning the project was estimated on 7-8 hours, but these last two hours were used into creating a good structure to consume in the proper way the Reddit Pagination service and getting familiar with the json structure data, this is reflected on the rendered data and the VueX configurations.