Continuity is a web application that helps you discover new movies and favorite the ones you have already watched. This project utilises modern frontend libraries and state management techniques to provide a smooth user experience.
Introduction and call to action button.
Search page for finding new movie, series or games. Add to favorites and view details.
Page that lets the user view favorites. Add custom movies. Remove favorites and view details.
- @reduxjs/toolkit: A set of tools to simplify Redux development.
- react-redux: Official React bindings for Redux.
- react-router-dom: Declarative routing for React applications.
- react-helmet-async: A reusable React component for managing
<head>elements with support for async server rendering. - tailwindcss: A utility-first CSS framework for rapid UI development.
- postcss: A tool for transforming CSS with JavaScript plugins.
- autoprefixer: A PostCSS plugin to parse CSS and add vendor prefixes.
- sitemap: A Node.js module for creating XML sitemaps for SEO.
- react-gtm-module: A simple and customisable Google Tag Manager (GTM) integration for React applications.
I use browserRouter from react-router-dom for site navigation. The user navigates by clicking on one of the options in the nav menu that is placed in the Header component. In the case of the first page there is also navigation via a button that uses useNavigate() from react-router-dom.
I use react-redux and @reduxjs/toolkit to manage actions when fetching movies from the API. For temporary storage and event handling I set up a store and created slices. I also call a utility function to store data in localStorage that needs to remain over sessions.
I use Tailwind for styling. For SEO I implemented tags using react-helmet-async and for SEO I used react-gtm-module to connect the site to Google Analytics 4.
I implemented Cypress and two end-to-end tests.
📦continuity
┣ 📂public
┃ ┣ 📜favicon.svg
┃ ┣ 📜sitemap.xml
┃ ┣ 📜temp.webp
┃ ┗ 📜robots.txt
┣ 📂src
┃ ┣ 📂app
┃ ┃ ┗ 📜store.js # Redux store configuration
┃ ┣ 📂components # Reusable UI components
┃ ┃ ┣ 📂buttons
┃ ┃ ┃ ┣ 📜CtaButton.jsx
┃ ┃ ┃ ┣ 📜DetailsButton.jsx
┃ ┃ ┃ ┣ 📜IconButton.jsx
┃ ┃ ┃ ┗ 📜SubmitButton.jsx
┃ ┃ ┣ 📂forms
┃ ┃ ┃ ┣ 📜AddMovieForm.jsx
┃ ┃ ┃ ┗ 📜SearchBar.jsx
┃ ┃ ┣ 📂icons
┃ ┃ ┃ ┣ 📜Bars.jsx
┃ ┃ ┃ ┣ 📜Close.jsx
┃ ┃ ┃ ┣ 📜Edit.jsx
┃ ┃ ┃ ┣ 📜Spinner.jsx
┃ ┃ ┃ ┣ 📜Star.jsx
┃ ┃ ┃ ┗ 📜StarOutline.jsx
┃ ┃ ┣ 📂modals
┃ ┃ ┃ ┣ 📜Modal.jsx
┃ ┃ ┃ ┣ 📜ModalEdit.jsx
┃ ┃ ┃ ┗ 📜ModalPopup.jsx
┃ ┃ ┣ 📜Footer.jsx
┃ ┃ ┣ 📜Header.jsx
┃ ┃ ┣ 📜Layout.jsx
┃ ┃ ┣ 📜MainContainer.jsx
┃ ┃ ┣ 📜MovieCard.jsx
┃ ┃ ┣ 📜MovieList.jsx
┃ ┃ ┗ 📜Toast.jsx
┃ ┣ 📂features # Redux slices and related logic
┃ ┃ ┣ 📂lists
┃ ┃ ┃ ┗ 📜listsSlice.js # User movie lists
┃ ┃ ┣ 📂movies
┃ ┃ ┃ ┣ 📜movieDetailsSlice.js # Movie details data fetching
┃ ┃ ┃ ┗ 📜moviesSlice.js # Movie data fetching
┃ ┣ 📂pages # Pages components
┃ ┃ ┣ 📜FavoritesPage.jsx
┃ ┃ ┣ 📜HomePage.jsx
┃ ┃ ┗ 📜SearchPage.jsx
┃ ┣ 📂utils
┃ ┃ ┗ 📜localStorage.js # Utility functions for localStorage interactions
┃ ┣ 📜App.jsx # Main app component with routing
┃ ┣ 📜Main.jsx # Application entry point
┃ ┣ 📜routes.js
┃ ┗ 📜index.css # Global styles / Tailwind
┣ 📜.env # Environment variables (e.g., API keys)
┣ 📜.generate-sitemap.js
┣ 📜.generateRobotsTxt.js
┣ 📜.index.html
Set up the project and file structure. Realised the scope was too large and adjusted it accordingly. I will now focus on just meeting the requirements. Wrapped the app in Provider and BrowserRouter. Wrote the code for handling loading and saving in utils/localStorage.js and started writing the code for the slices in features. I still need to add better comments to the code.
Completed adding comments for Redux-related code. Implemented search functionality and basic navigation.
Implemented favorites functions and display. Added buttons to add and remove from favorites. Added icons for the buttons. Implemented saving to localHost from store. Created a new styling branch and implemented the first pass of styling.
Finished styling. Added a slice to fetch movie details. Added and implemented a modal to view movie details. Reworked buttons into separate components, need to document this.
Added meta tags and scripts to generate sitemap and robots.txt. Added dynamic meta for when the user views a movies details.
Implemented GA4, GTM and Cypress. Left to do is additional test, WCAG and commenting.
Added and cleaned up comments. Added another test. Updated documentation.
Implemented full CRUD, some commenting and fine tuning suffered. Left to do is commenting, fine tuning and planning presentation.
Fine tuned some parts, implemented filtering for movies, games and shows in search.