Skip to content

Latest commit

 

History

History
70 lines (55 loc) · 2.65 KB

README.md

File metadata and controls

70 lines (55 loc) · 2.65 KB
Raw

Netlify Status

Starcode Frontend

Development

This project was bootstrapped with Create React App.

Available Scripts

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.

Environment Variables

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

Node Version

This project uses Node version v16.15.0. But I guess it should work with most other versions as well.

Deployment

This project is deployed on Netlify. The deployment is triggered automatically when a commit is pushed to the main branch.

Structure

The project is structured as follows:

  • src - Contains the source code of the project
    • assets - Contains the static assets
    • components - Contains the React components
    • data - Contains the content used by the application which is not fetched from the backend
    • util - Contains the utility functions
    • strapi - Contains the Strapi API client which
    • views - Contains the pages of the application is used to fetch data from the backend
    • App.tsx - The main component of the application
    • index.tsx - The entry point of the application

The project uses React Router for routing (toggling bewtween the different views of the application).

Components

For each component there exist two files:

  • ComponentName.tsx - The component itself
  • ComponentName.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>
  )
}

Resources