📝 Create semester schedules without stress. This is the client folder for the senior-knights/course-schedulizer project. For more information about the application, please view the About Page on our website. For help using the application, visit our Help Page (once we make it).
Created by current students at Calvin University for their computer science senior project.
This project was bootstrapped with Create React App.
csv/ contains test files for the application.
public/ contains files import when deploying the application.
src/ contains all source files that build the client application. For development techniques, see below.
.eslintrc.js is a specific ESLint config. .env allows for overriding the Create React App ESLint config.
The .tsconfig has been modified to allow for barreling and absolute imports.
Husky is used with Lint Staged to format all code to the ESLint rules when they are committed. This insures that changes pushed are not confused by changing syntax or code style.
This will go through the development process for the client-course-schedulizer application.
In the project directory, you can run:
Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode. See the section about running tests for more information.
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed!
Note: this is a one-way operation. Once you eject, you can’t go back! Would not recommend using this. Use craco instead of ejecting.
Used by GitHub actions to deploy the build. Will trigger predeploy command.
React's functional programming is great for dealing with complex, stateful user interfaces. With React, all data is either primitives or an object (which includes functions) since the library focuses on immutability. Each React component defines how every view will behave for a given state. Generally, each view is rendered whenever the data is updated.
Every folder contains index.ts that exports all from every file in the folder which allows for barrelling and absolute imports.
assets/ contains every image or other "artful" content used in the client app.
components/ contains all React components in the project. Every component resides within a folder, that is its exported name written in PascalCase. When a folder is used for additional storage, such as pages/ (for the apps views) and reuseables/ (for components used in many other components), they are written in camelCase. Each component folder contains index.ts, ComponentName.tsx, ComponentName.test.tsx, and ComponentName.scss. Sometimes they will contain a componentNameService.ts or additional folders for children components.
styles/ contains global styles. Uses Sass in SCSS form.
types/ contains module type declares for NPM packages that do not ship with types.
utilities/ contains helper functions, logic, interfaces, constants, services, and all other code-related things that are not React Components.
index.tsx is the entry point into the React application.
We typically use packages rather than rolling our own features. This saves times and catches more edge cases, typically.