Cinecity is a web application that allows you to view, sort and filter a film catalog using the API from The Movie Database. The design of the interface, search and ordering is inspired by websites focused on author cine programming and art cine such as the page of the Cineteca Nacional y Ambulante.
This project allows you to filter using the following genres.
- Animation
- Documentary
- Drama
- History
- Music
- Science Fiction
It is also possible to order with endpoint configured in the following way.
- Ascending popularity
- Descending popularity
It is possible to navigate the content of the catalog using the minimalist page displayed at the bottom of the page.
Cinecity was developed using the following technologies.
React was the core framework used to structure and build the frontend of Cinecity. It facilitated the creation of custom components, services, and modules that formed the user interface. React's routing system was used to manage navigation between different parts of the application, enabling seamless transitions and user interactions.
TypeScript was the primary programming language used to write the frontend code. It added strong typing to the application, catching errors during development and providing better code quality and maintainability. It was instrumental in defining the data models, logic, and interactions within Cinecity.
CSS was employed to style the user interface of Cinecity.
The combination of color palette and typefaces in Cinecity seeks to achieve a clean, simple, minimalist and user-friendly look. The green color brings energy to draw the user to the key elements of the app, while the black and white colors maintain legibility and simplicity. The choice of typefaces balances style with clarity, ensuring the website is attractive and functional.
Cinecity's design is characterized by the use of monochromatic colors with a touch of vibrant green that provides a modern, clean and simple user experience.
Cinecity uses Inter typography selected to achieve a balance between legibility and style.
A high fidelity desktop prototype was designed to anticipate the user experience. Design available here: Figma Interactive Mobile Prototype
Web version of the high-fidelity prototype design:
This desktop app is a first version and is in the process of improving the experience. Future versions will add exciting enhancements such as;
- Responsive version.
- Numeric pagination.
- User profiles.
- Playlists.
Project developed by Marianne Teixidó as part of the web development bootcamp in Laboratoria