Rubén Ramírez

FIGURAniS

FIGURAniS is an anime figurine collectibles management application. With FIGURAniS, you can read, add, edit, and delete anime figures from your collection.

  • Cover with the Figuranis logo and the homepage in the background.

  • Details

    Detail page of a figure with an image and various data.

  • Home

    Figuranis homepage with several figures with images and some data.

  • SonarCloud

    SonarCloud data.

  • Figma

    Design created with Figma for building the Figuranis application.

  • Modify & Add

    Sample of forms for creating and modifying figures.

  • Login

    Page to log into the Figuranis application.
Backend
Frontend
TypeScript
MERN
SPA
CRUD
CI/CD
Git
GitHub
Vitest
Jest
Supertest
React Testing Library
Key Features

FIGURAniS is built using the SPA (Single Page Application) architecture pattern to provide a seamless and uninterrupted user experience. Additionally, users can enjoy various features that facilitate the management of their anime figure collection. Some of the highlighted features include:

  • Secure Authentication

    A robust authentication system has been implemented to ensure secure access to the platform. To achieve this, JSON Web Tokens (JWT) are used to handle user authentication and passwords are protected using the bcrypt.js library, which utilizes the bcrypt hashing algorithm to securely store passwords and prevent security vulnerabilities.

  • Informative Details

    The page offers an extensive list of anime figures with informative details. To achieve this, Axios is used to make HTTP requests to the backend API and fetch the necessary data to display in the interface.

  • Intuitive Operations

    FIGURAniS allows users to easily add, delete, and modify figures in their collection through intuitive forms, significantly improving the management of the anime figure collection.

  • User-Friendly Notifications

    Error and success notifications have been implemented to provide clear and user-friendly information when using the platform. This ensures a smooth and confusion-free user experience.

  • Our Commitment

    A continuous effort has been made to provide the best possible experience to users. We strive to maintain a high level of Performance, Accessibility, Best practices, and SEO, supported by tools such as Lighthouse and SonarCloud.

Technologies Used

FIGURAniS was built using the MERN stack (MongoDB, Express.js, React, and Node.js), ensuring an efficient and scalable application. Additionally, for the frontend, Redux Toolkit was used to manage the global state of the application, making it easier to handle shared data between components. React Router Dom was also used to manage routes and navigation between different pages of the SPA.

Testing and Deployment

Testing plays a crucial role in FIGURAniS to ensure software quality. In the frontend, Vitest and React Testing Library were used to write and execute unit tests for UI, global state, and hooks, ensuring the solid functioning of components and user interface logic. In the backend, Jest was used for unit tests, validating server functions and logic. Additionally, Supertest was used for integration testing, ensuring that API requests and responses behaved as expected.

To deploy FIGURAniS, Netlify was used for the frontend and Render for the backend, ensuring a smooth and efficient deployment in production.

Conclusion

FIGURAniS is a comprehensive and well-designed platform that provides a unique and immersive experience for managing anime figure collections. With the use of the mentioned frameworks and tools, an efficient, scalable application with a user-friendly interface has been created for all anime enthusiasts. I am excited to share FIGURAniS with other anime lovers so they can manage their collectible figures and enjoy an unparalleled experience on this platform.

Interested in working together?

Send Me a Message