Frontend File Structure

Overview

The frontend is located in ./frontend/ from the project's root directory.

Clarification

Console pages mean pages with url [host]/console/**.
Home pages mean pages with url [host]/** other than console pages.

Simplified File Structure

📦frontend
┣ 📂public --- Files that is public to the internet
┣ 📂src --- Source code
┃ ┣ 📂api --- Client-side API calls
┃ ┣ 📂components --- React components
┃ ┃ ┣ 📂common --- Components that is used in many pages
┃ ┃ ┣ 📂forms --- Forms that can be shared along multiple pages
┃ ┃ ┗ 📂pages --- Frontend pages
┃ ┣ 📂context --- Global context of the react app
┃ ┣ 📂routes --- React routers
┃ ┃ ┣ ···
┃ ┃ ┗ 📜routes.js --- Routes configuration
┃ ┣ 📂utils --- Utils
┃ ┃ ┣ 📂canada --- Data for Canada province and cities
┃ ┃ ┣ 📂data
┃ ┃ ┃ ┗ 📜formatter.js --- Data formatter for address, etc...
┃ ┃ ┣ 📂inputsBuilder --- A handwritten form library for performance optimization
┃ ┃ ┣ 📂validation --- Data validators
┃ ┣ 📜App.js --- Top React component
┃ ┣ 📜config.js --- frontend configuration (Config server address)
┃ ┣ 📜index.js --- Main entry of the react app
┃ ┗ ···
┣ 📜package.json
┣ 📜README.md
┗ 📜yarn.lock

Detailed File Structure

📦frontend
┣ 📂public --- Files that is public to the internet
┃ ┣ 📜background-1.jpg --- Background image used in home page
┃ ┣ 📜favicon.ico
┃ ┣ 📜index.html
┃ ┣ 📜logo192.png
┃ ┣ 📜logo512.png
┃ ┣ 📜manifest.json
┃ ┗ 📜robots.txt --- Access control for robots (Google, etc...)
┣ 📂src --- Source code
┃ ┣ 📂api --- Client-side API calls
┃ ┃ ┣ 📂notification --- Notification of interest APIs
┃ ┃ ┃ ┗ ···
┃ ┃ ┣ 📂organization --- Organization APIs
┃ ┃ ┃ ┣ ···
┃ ┃ ┣ 📂partnership --- Partnership opportunity (listing) APIs
┃ ┃ ┃ ┣ ···
┃ ┃ ┣ 📂project --- Project (wards, etc...) APIs
┃ ┃ ┃ ┗ ···
┃ ┃ ┣ 📜auth.js --- Authentication APIs
┃ ┃ ┣ 📜here.js --- HERE APIs (Geolocation) APIs
┃ ┃ ┗ 📜upload.js --- Upload and download uploaded file APIs
┃ ┣ 📂components --- React components
┃ ┃ ┣ 📂common --- Components that is used in many pages
┃ ┃ ┃ ┣ 📜Dialog.js --- Dialog
┃ ┃ ┃ ┣ 📜Dropzone.js --- Upload drop zone
┃ ┃ ┃ ┣ 📜GoogleMap.js --- Google Map
┃ ┃ ┃ ┣ 📜Header.js --- Home page header
┃ ┃ ┃ ┣ 📜Link.js --- React router link with Material-UI design
┃ ┃ ┃ ┣ 📜Loading.js --- Loading indicator (spinner)
┃ ┃ ┃ ┣ 📜MultiSelectField.js --- Multiple/Single dropdown select
┃ ┃ ┃ ┣ 📜PhoneInput.js --- Phone number input
┃ ┃ ┃ ┣ 📜Progress.js --- Progress indicator
┃ ┃ ┃ ┗ 📜TextInput.js --- Customized text field
┃ ┃ ┣ 📂forms --- Forms that can be shared along multiple pages
┃ ┃ ┃ ┣ 📜notificationOfInterest.js --- Send notification of interest form
┃ ┃ ┃ ┣ 📜opportunity.js --- Opportunity listing form
┃ ┃ ┃ ┗ 📜organization.js --- Organization / Account profile form
┃ ┃ ┗ 📂pages --- Frontend pages
┃ ┃ ┃ ┣ 📂Auth
┃ ┃ ┃ ┃ ┣ 📜Login.js
┃ ┃ ┃ ┃ ┣ 📜SignUp.js
┃ ┃ ┃ ┃ ┗ 📜Verify.js
┃ ┃ ┃ ┣ 📂Console --- Dashboard/Console pages
┃ ┃ ┃ ┃ ┣ 📂Interest --- Notification of interest
┃ ┃ ┃ ┃ ┃ ┣ 📜ReceivedInterests.js --- List all received notifications of interest
┃ ┃ ┃ ┃ ┃ ┣ 📜SentInterests.js --- List all sent notifications of interest
┃ ┃ ┃ ┃ ┃ ┣ 📜SubmitInterest.js --- Submit a notification of interest
┃ ┃ ┃ ┃ ┃ ┣ 📜ViewReceivedInterest.js --- View one received interest
┃ ┃ ┃ ┃ ┃ ┗ 📜ViewSentInterest.js --- View one sent interest
┃ ┃ ┃ ┃ ┣ 📂Opportunity --- Partnership opportunity
┃ ┃ ┃ ┃ ┃ ┣ 📜Edit.js --- Edit/View an opportunity
┃ ┃ ┃ ┃ ┃ ┣ 📜List.js --- List all opportunities
┃ ┃ ┃ ┃ ┃ ┣ 📜OpportunityDialog.js --- A dialog shows details of an opportunity
┃ ┃ ┃ ┃ ┃ ┣ 📜Post.js --- Post an new opportunity
┃ ┃ ┃ ┃ ┃ ┗ 📜Search.js --- Search opportunities
┃ ┃ ┃ ┃ ┣ 📜Console.js --- The sidebar and header of all pages
┃ ┃ ┃ ┃ located in this folder
┃ ┃ ┃ ┃ ┣ 📜Dashboard.js --- Dashboard page (empty now)
┃ ┃ ┃ ┃ ┣ 📜navConfig.js --- Configuration of the sidebar
┃ ┃ ┃ ┃ ┗ 📜Profile.js --- Account profile
┃ ┃ ┃ ┣ 📜404.js --- 404 page
┃ ┃ ┃ ┣ 📜CaseStudies.js --- (empty now)
┃ ┃ ┃ ┣ 📜Resources.js --- (empty now)
┃ ┃ ┃ ┣ 📜Sectors.js --- (empty now)
┃ ┃ ┃ ┗ 📜Toolkits.js --- (empty now)
┃ ┣ 📂context --- Global context of the react app
┃ ┃ ┗ 📜index.js
┃ ┣ 📂routes --- React routers
┃ ┃ ┣ 📜ConsoleRoute.js --- React router component for console pages
┃ ┃ ┣ 📜HomeRoute.js --- React router component for home pages
┃ ┃ ┣ 📜index.js
┃ ┃ ┗ 📜routes.js --- Routes configuration
┃ ┣ 📂utils --- Utils
┃ ┃ ┣ 📂canada --- Data for Canada province and cities
┃ ┃ ┃ ┗ ···
┃ ┃ ┣ 📂data
┃ ┃ ┃ ┗ 📜formatter.js --- Data formatter for address, etc...
┃ ┃ ┣ 📂inputsBuilder --- A handwritten form library for performance optimization
┃ ┃ ┃ ┗ ···
┃ ┃ ┣ 📂validation --- Data validators
┃ ┃ ┗ ┗ 📜signUpValidator.js
┃ ┣ 📜App.js --- Top React component
┃ ┣ 📜App.test.js
┃ ┣ 📜config.js --- frontend configuration (Config server address)
┃ ┣ 📜index.css
┃ ┣ 📜index.js --- Main entry of the react app
┃ ┣ 📜logo.svg
┃ ┣ 📜serviceWorker.js
┃ ┗ 📜setupTests.js
┣ 📜package.json
┣ 📜README.md
┗ 📜yarn.lock
Edit this page