Skip to main content

Week 1

  • Created wireframes of different colour schemes.
  • Had discussions on wireframes.
  • Finalized the wireframes.
  • Decided the libraries to be used.
  • Finalized the architecture of the codebase.
  • Created a pull request for the basic folder structure.

Explanation​

Web application architecture defines the interactions between applications, middleware systems, and databases to ensure multiple applications can work together.

Sequence Diagram​

sequence-diagram

Folder Structure​

|-- public
|-- src
    |-- api
    |-- assets
        |-- [+] images
        |-- [+] fonts
    |-- components
         |-- Header
         |-- Footer
         |-- [+]
         |-- Widgets
            |-- [+] Buttons
            |-- [+] tests
            |-- index.js
    |-- constants
        |-- endpoints.js
    |-- pages
    |-- services
    |-- styles
    |-- App.js
    |-- index.js
|-- package.json
  • Api: This folder consists the list of all the API functions.
  • Assets: This folder consists of all the fonts and other media particularly images.
  • Components: This folder consists of shared elements that can be used by all the pages such as header and footer and consists of sub folder widgets with contains helper components for the pages such as Button, Text Field, Image etc.
  • Constants: This folder consists the list of all the endpoints for the API and the object for the routes.
  • Pages: This folder consists of all the pages to be displayed.
  • Services: This folder defines all the API services.
  • 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.

Wireframes​

Every project starts with a clear vision. Hence our first step was to design the user interface, taking reference from modern web apps. A good interface design should be attractive. It means that the use of that interface is enjoyable. The design should include cool user-friendly features with visual appeal. Clarity is the most important characteristic of our user interface design. We have prepared many prototypes and low as well as high fidelity wireframes for FOSSology.

Contributions​