CVWO Assignment Sample React App

This sample React app is provided to help you experiment and practice web development fundamentals. It shows how certain functionality can be implemented. However, do note that this is far from a model example. After all, we want to see how you maximise your learning in web development and good software development practices.

Getting Started

Running the app

1. Fork this repo.
2. Clone your forked repo.
3. Open your terminal and navigate to the directory containing your cloned project.
4. Install dependencies for the project by entering this command:

yarn install

5. Run the app in development mode by entering this command:

yarn start

6. Open http://localhost:3000 to view it in the browser.
7. You should see a page like this.

Navigating the code

This is the main file structure

.
├── node_modules
├── public
├── src
├── README.md
├── tsconfig.json
├── package.json
├── .eslintrc.js
├── .prettierrc.js
└── yarn.lock

Main directories/files to note:

• src usually includes all your source code. That is where most of your functional code will be.
• README.md is a form of documentation about the project. It is what you are reading right now.
• package.json contains important metadata, for example, the dependencies and available scripts in the project.
• .eslintrc.js contains the configuration for ESLint. ESLint is a tool to help enforce code consistency.
• .prettierrc.js contains the configuration for Prettier. Prettier is a tool to help format code.

Try changing some source code and see how the app changes.

Additional Notes

• This project uses Typescript.
• The linting and code formatting rules are specified in .eslintrc.js and .prettierrc.js respectively. You may modify the rules.
• The available scripts are in package.json. Here are some scripts that you are likely to use more often:
  • yarn start
  • yarn lint:fix
  • yarn format:fix

Acknowledgements

This project was bootstrapped with Create React App. This project uses MUI, TypewriterJS, ESLint, Prettier.