Contet: 📝
The purpose of this project was to develop a SPA (single page application) on any topic, using React technology. In my case I chose a theme close to me. The challenge was: to create several components using React hooks. Maintain a well-organized folder structure, such as "components" and "containers", to keep the code clean and modularized. In a short: Create views that interact with the endpoints of a previously created API, allowing the user to interact with the information provided by the API. In summary, the goal is for the student to build a SPA with React that is functional, aesthetically pleasing and can handle both internal and external data through an API.
you can test the application by following these steps:
Clone the project on your computer
$ git clone 'url-repository'
Install all dependencies
$ npm install
Create a .env with the credentials on the .env.example
Start server with:
$ npm run dev
Connect with the database following:
$ npx sequelize-cli db:create
$ npx sequelize-cli db:migrate
$ npx sequelize-cli db:seed:all
Now is time for frontend project:
Clone the project on your computer
$ git clone 'url-repository'
Install all dependencies
$ npm i
Start server with:
$ npm run dev
Last step download the dataBase:
Data base Git-Hub
To start the project, I first had to define the general design and structure of the application. Since the backend was already done, creating the views for the frontend was simpler and more intuitive. I listed all the functionalities and actions to be performed by my application, based on the API endpoints created earlier. Then, I precisely calculated the time needed to implement each function.
- Login
- Register
- Logout
- Home view
- About Us
- Concerts
- Groups
- Contacts
- My Profile
- Access to personalize your personal data (from My Profile)
- Delete Profile
- Get my tickets
- Book ticket
- Add to favorites
- Get my favorites
- Register my group
- Get my group
- Update some information of my group
- Get my concerts
- Update(some information) of my concert
- Public concert
- Search user by name & surname
- Update profile
- Get all users
- Delete & restore user
- Delete & restore group
- Delete & restore concert
- Update some information of group
- Update some information of concert
As future features I would like to develop the user interface in more depth, having more options for managing personal data, in addition to the collaborations and to be able to introduce real sale of tickets, are some examples of the general idea.
This project is belonging to license Creative Commons Legal Code. That's right, all the images I have used in this final project come from public resources and are freely available for use. Furthermore, I want to emphasize that I have only used them for educational purposes within the context of this project. They have not been used for any commercial purpose or with intent to infringe copyright.
I thank my teachers for their time dedicated to this project:
-
Dani
-
Jose
-
David
-
Mara
