Week 1
- Created wireframes of different colour scheme
- Had discussions on wireframe
- Finalized the wireframe
- Decided the libraries to be used
- Finalized the architecture of the codebase
- Created a pull request to add the folder structure in the main branch
- Added storage helper functions for cookies and local storage
Proposed Folder Structure:
|-- public
|-- src
|-- api
|-- assets
|-- [+] images
|-- [+] fonts
|-- components
|-- Header
|-- Footer
|-- Widgets
|-- Buttons
|-- [+] tests
|-- index.jsx
|-- constants
|-- endpoints.js
|-- externalLinks.js
|-- routes.js
|-- pages
|-- Browse
|-- index.jsx
|-- [+] services
|-- [+] shared
|-- [+] styles
|-- App.js
|-- Routes.js
|-- index.jsx
|-- package.json
Note: [+] indicates folder
- Api: Contains the list of all the API functions.
- Assets: Holds all the static assets like images and fonts.
- Components: Consists of shared elements that can be used by all the pages such as header and footer. Widgets sub folder contains helper components such as Button, Input Container, Image etc.
- Constants: Includes all the application wide constants like API endpoints and the list of all the routes.
- Pages: Consists of all the pages to be displayed.
- Services: Defines all the API services.
- Shared: Contains application wide utility functions like auth helpers, storage helpers, date helpers etc. It also carry 3 types of auth guards, public layout, private layout and admin layout.
- Styles: This folder contains mainly three files:
- Theme: It consists of all the variables related to themes such as primary-color, secondary-color, primary-text etc.
- GlobalStyle.js: It consists of all the css related to theme.
- global.css: It consists of all the default css such as spacing.
- App.jsx: This file is used for application wide state and style managements. It includes theme provider, global styles and imports of all the external CSS libraries.
- Routes.js: maps all the url routes to the JSX components
- index.jsx: the entry point of the application