This project was bootstrapped with Create React App.
To install the dependencies, run yarn install.
To start the development server, run yarn dev.
Before pushing to the repository, run yarn lint to check for linting errors.
To fix linting errors, run yarn fix.
To run this project, you will need to add the following environment variables to your .env or .env.development.local file
REACT_APP_BACKEND_URL- The URL of the backend API
This project uses Node version v16.15.0. But I guess it should work with most other versions as well.
This project is deployed on Netlify. The deployment is triggered automatically when a commit is pushed to the main branch.
The project is structured as follows:
src- Contains the source code of the projectassets- Contains the static assetscomponents- Contains the React componentsdata- Contains the content used by the application which is not fetched from the backendutil- Contains the utility functionsstrapi- Contains the Strapi API client whichviews- Contains the pages of the application is used to fetch data from the backendApp.tsx- The main component of the applicationindex.tsx- The entry point of the application
The project uses React Router for routing (toggling bewtween the different views of the application).
For each component there exist two files:
ComponentName.tsx- The component itselfComponentName.scss- The SCSS module for the component (if the component has styles)
The components are implemented using functional components and React Hooks.
import React from 'react';
import './ComponentName.scss';
type ComponentNameProps = {
// The props of the component
}
const ComponentName = (props: ComponentNameProps) => {
const [state, setState] = useState()
return (
<div className="component-name">
...
</div>
)
}