Film Finder
Film Finder allows users to explore and discover a range of films. By using a custom-built API, users can create their list of favourite films as well as access detailed information about the films such as release dates, director and genre. The website is developed using Node.js and Express.js for the backend, MongoDB for data storage, React for the frontend and Styled Components for the CSS.
JavaScript
HTML
CSS
React
Node/Express
MongoDB
Objective
To gain a good understanding of building a custom API and more experience using React as well as React features such as Hooks.
Approach
The project began by gathering a database of films, with their details such as summaries, release dates, directors and director biographies stored in a JSON file. To ensure proper connectivity, I created a simple API with GET requests using Postman to test all fetching requests. I integrated MongoDB using Mongoose schema for data storage and to ensure everything was working correctly, I created a simple site using JavaScript and a fetch request to retrieve film data from the API.
I chose React as the front-end framework due to its popularity, component-based architecture, and efficient rendering capabilities. I built a dynamic layout to render the films in a film grid and designed a side panel to display more detailed information on the films as well as a film search functionality. The site also includes a favourite feature that allows users to select and access their preferred films, which are stored locally.
Building on the site’s interactivity, I added POST, PUT, and DELETE API requests that are handled using Axios. These requests enable users to create a personal profile and modify essential details such as usernames and email addresses. They can also save their favourite films to their profile and view or remove them later. The user authentication is processed using JWT tokens, enabling a secure login experience.