Consolidate your knowledge of full-stack development by designing and building a web application that showcases your skills in HTML, CSS, client-side JavaScript, server-side JavaScript with Express, and database interactions using SQLite.
PROJECT TEAM
Jaya, Isaac, Sahil, Nick
PROJECT TIMELINES
Project Start: Week 5, Day 1 (Monday)
Project Completion: Week 5, Day 4 (Thursday) by 3 PM.
Presentations: Week 5, Day 5 (Friday) morning
PROJECT OBJECTIVES
Design and Planning: Create wireframes and plan the layout and functionality of your web application.
Front-End Development: Develop the user interface with HTML and CSS, focusing on a responsive and intuitive design.
Interactivity: Implement dynamic content on the front end using vanilla JavaScript for DOM manipulation.
Back-End Development: Build a server with Express that handles HTTP requests and communicates with a SQLite database.
Database Integration: Design a database and use SQLite to store, update, and retrieve data efficiently using SQL queries.
Collaboration: Work as a team to design and build a web application that showcases your skills in full-stack development, and collaborate on code using Git and GitHub.
SOFTWARE TOOLS USED
Trello, Figma, Vscode, Vite, better-sqlite3, Express, Cors, Render, Deiscord, Google meet
LINKS
Trello: https://trello.com/b/NAqIrAGF/week-5-project-movies Github: https://github.com/nicklormanhall/assessment-week5-movie-review/tree/main Figma: https://www.figma.com/file/OwUcFoAZydAYuHiesREPMr/MOVIE-2024?type=whiteboard&node-id=0-1&t=fWy15rOwb7YISD9v-0 Render (live): https://movie-reviews-2024.onrender.com/ Render (Server): https://assessment-week5-movie-review.onrender.com/
USER STORIES
As a user, I want to see a list of movies, with images, a description and star ratings/rotten tomato score. As a user, I want to filter or sort by reviews or genre As a user, I want to be recommended movies with similar themes/genres when looking at a movie. As a user, I want to select my movie preferences and see a list of suitable movies with pictures. When I click on the picture I want to see a trailer, ratings from other users and ratings from external review sites. I want to be able to submit my own movies to the site for consideration.
PLANNING
We initially discussed options for our project with each person adding suggestions, we ended up deciding on Movies released in 2024.
As part of our set up we created a new discord channel, a figma project for the wireframe and a trello board.
We made two different wireframe designs for the front sheet, as a group we decided on design 2, then added a wireframe design for a second page
We discussed actions and allocated to individuals
MVP
✅ Thumbnail image of movies scroll ✅ Movie page is displayed at the bottom when a thumbnail is clicked movie shows with movie summary, rotten tomato score and genre ✅ Minimum of 20 movies in our list, with movie summary, rotten tomato score and genre ✅ 2nd page allow a user to add their own movie, this is then to appear on the main page ✅ Ability to sort by score
STRETCH GOALS
COMPLETED
✅ Add ability to delete a movie or comment ✅ Change the colour of the font/background based on the % based on the Rotten Tomatoes ✅ Add platform information
NOT COMPLETED
❌ Ability to filter by genre ❌ Add ability to comment or add a star rating on the existing movies ❌ Use of movies API to retrieve additional titles ❌ Ability to sort by Rotten Tomatoes rating into a numbered list showing ‘# of 20’ at the top of the page. ❌ Add arrow keys to switch through movies ❌ Add trailer video
CHALLENGES