Skip to content

Week1

Jump to bottom
Aman Dwivedi edited this page Jul 22, 2021 · 6 revisions

Week 1 Report

  • 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

Contributions

Clone this wiki locally