This WebApp is a music listening platform dedicated to education. It gives access to sung courses by subject (philosophy, chemistry, spanish...) and by level (college and high school) after connection. This website includes an administration interface for courses and users on React Admin.
This project was developed by 6 developers in training at the Wild Code School of Lille (React Javascript) as an end of training project. The objective of this application for the client is to give to see and test an application close to what will be the final product, to make concrete the project and to give to see to the networks of sponsors and potential customers of WIM.
- Template : Application developed on React, Node Express from a template developped by the Wild Code School.
Tools used in this template:
- Concurrently : Allows to execute several commands in the same terminal
- Husky : Allows to execute actions when triggered by git commands
- Vite : Alternative to Create-React-App, with fewer packages for a smoother experience
- ESLint : "Code quality" tool, ensures that pre-configured rules are respected
- Prettier : "code quality" tool, also focuses on code style
- Standard Airbnb : One of the most famous "standards", even if it is not officially linked to ES/JS
- Nodemon : Tool to restart a server each time one of the files is modified
MySQL: A database has been developed on mysql thanks to WorkBenchReactAdmin: Course and user management has been developed on React AdminRedux: Redux was used to manage user information at the time of connection or registration and throughout the navigationPassport: Passport was used in the backend to manage authentication- Other miscellaneous libraries:
Material UIwas used to manage the registration form.Styled Componentwas used to manage the application's style.React Routerto manage the links between pages.Swiperto manage the welcome carousel on the application.React-toastifyto manage error messages (if the user did not send an email...).Prop-typesto type the props.Axiosfor API calls.
On VSCode, install Prettier - Code formatter and ESLint plugins and configure them
Clone this repository, go inside
Run the npm run setup command
NB: To run the backend, an environment file with the connection data of a valid DB is required. A sample can be found in backend/.env.sample
setup : Initialization of the frontend and backend as well as the tools
dev : Start the three servers (frontend + backend + admin) in the same terminal
dev-front : Start a React server for the frontend
dev-back : Start an Express server for the backend
dev-admin : Start a React server for the admin
lint : Run code validation tools (will be executed automatically at each commit)
fix : Fix formatting errors (to be run if lint does not pass)
A team of developers in training from March to June 2022 at the Wild Code School in Lille