This is the Front-End part of the celebrity recognition app project, developed as a Single Page Application, using React.js, structured using Feature-Sliced Design architectural methodology, written with clean, organized and up to date code; utilizing best practices for optimal understanding and readability, as well as the latest tools available.
The main purpose of this part of the project is to allow a performant, visually pleasant experience to the user, fast loading and rapid notice of interactive elements (in both mobile and desktop devices), a basic focus in accessibility; as well as the management of any state needed for the user interaction using React.js, and React Router to handle routing across the different pages in the application.
The whole app, in very simple terms, allows the user to register, login, upload an image to detect a celebrity face within it, using an AI model trained by Clarifai; and increment it's entries while doing the last.
The Front-End part, in technical terms, is in charge of handling a performant loading and presentation of the app, the style and responsiveness of the UI across all devices, user interactivity, user input, input validation and routing across pages; as well as the delivery of all corresponding requests to the server, containig the necessary user data to allow it's processing for the core tasks such as user registration, account activation, user authentication, user authorization (using cookies and Json Web Token), password reset, image uploads and the processing/display of all data that is sent back from the server as a response.
For the acomplishment of the topics mentioned before, the latest tools and technologies where utilized. To list some: Semantic HTML, CSS custom properties, CSS functions such as clamp, CSS layout tools such as grid and flexbox, ES2022 JavaScript, React functional paradigm approach, React Context, React Hooks and Custom Hooks, React Router v6, React Router Actions and Loaders, etc.
All of the aspects mentioned above contribute to a smooth and complete user experience where it's always known what the app is doing and what response is giving back to the user.
- API side code can be found in this repository.