This is the application made by using the Next.js. The Metropolitan Museum of Art of New York City's museum's data is fetched by API and then the application can able to perform the authentication functionality as well as the search, delete, and rendering with the help of react hooks and libraries. The application is deployed on Vercel (here's the link)
This is the ideal Museum Website which is made by using Next.js and Node.ja mainly. I have created the API to fetch the sample loade data on MongoDB atlas. You can find the API code of backed devlopment in my github profile. As i am also citing it below:
https://github.com/JayAtSeneca/Metropolitan-Museum-User-API
Secondly, To develop a modern, responsive user interface for searching and viewing data on the publicly available Metropolitan Museum of Art Collection API. By using the knowledge of React, Next.js and React Bootstrap to develop my solution. However, if you wish to use a different UI library such as Material UI, etc. or add additional images, styles or functionality, please go ahead. I have also attacted the linked below:
https://bootswatch.com
- Authentication using JSON Web Tokens(JWT)
- Jotai for managing the application state
- React hook form for creating the login form and register form
- Connected the application with backend by creating a REST API which helps in performing CRUD operations with MongoDB database.
- Used React Bootstarp for developing the User Interface
- Bcryptjs is used for encrypting password by hash the passwords. It can handle/receive on the user's hashed password. Also, it can save it to the database and that will be saved for every user and checked upon every login.
- Added JWT to the hashed password, then save the hashed password within the JWT token.
User must register by providing username and password in order to use the application. Before moving on to the next step, the user must confirm the password. The user will therefore log in to the system. The user can access the application with the right information. After that, the user can search or conduct an advanced search to learn more about the museum collections. The app will produce the results based on the search. The user can also view their favorite list and search history. Additionally, the application allows users to delete previously performed searches from search histories as well as items put to favorites. In the future, after logging out, the user can log back in to retrieve all account activity.
As you can see here "bob" is logged in here
He search the word "flower" in the search tab and he will get the results
His search history is added in list, he can also remove it by clicking on the delete button
He can add the item in favorites
And he can access all the items added in his favorites list
After he clicks on the logout button it will redirect him to the login page. And he can get all his account activities back after logging in again.
