An ExamScore App that will create student reports
Project Link - https://examscoreapp.netlify.app/
Exam App was built with Material UI library, making it responsive using their Grid system, created a theme which reflects on buttons colours and shapes. For state management I used Redux Toolkit and Redux Persist in cases where user closes the tab or the browser, the state is safely saved into local storage for future use. For translations I used "i18n" package which will switch on flag icon click. App is split into 3 sections:
- Create Record Component: The "Student Name" input field - here we restrict user to insert numbers and special characters using Regex, it will display an error if user is attempting to do so. Same goes for "Score" field, it will complain if user tries to insert a letter OR if number is greater than 100. Class Radio button also shouldn't be empty and it will throw an error if user tries creating a record without it. So All 3 inputs are mandatory.
- Filter Component: Here I'm pulling the records array from redux and using ES6 array methods to filter whatever user selected, giving also the option to reset it if necessary
- List Component: Here I'm displaying the data with the option to delete a single record or all of them at once by displaying a modal to make sure the selection isnt accidental.
//==============================================================================================================================================================
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may 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!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify