MovieStore-Lab 2025

🍿 Welcome to MovieStore-Lab! 🎬

Welcome to MovieStore-Lab, the ultimate online movie store! Browse the "aisles" of cinematic hits, hidden gems, and cult classics. Whether you’re hunting for today’s top picks or yesterday’s treasures, we’ve got the “stock” to keep your watchlist full. Powered by TMDB, it’s your ticket to a virtual movie shopping spree! 🎟️

Naaa, this isnt a real store, just a Learning Project! But it could be real someday maybe ? 😁

Project Information

Contributors:

• PMC
• Dilan
• Sowmyak059

This project was created as part of Lexicon learning Course and was part of a Group Project in 2025. We decided to learn to use Astro, React and JavaScript to create a simple Movie store that uses TMDB.org API to display information about movies the user potentially want to buy.

🪶 Features

• Movie Search: Users can search for movies by title and view relevant details.
• Add to Cart: Add movies to the Cart.
• Popular Movies: Displays a list of currently popular movies in each category.
• Movie Details: Provides detailed information about selected movies, including release date, overview, and ratings.
• Display movie categories: display movies in different categories.

Getting Started

To set up and run the project locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/PMC/moviestore-lab.git

2. Navigate to the project directory:

   cd moviestore-lab

3. Install dependencies:

   npm install

4. Configure the API:

   • Create a .env file in the root of the project.
   • Add your TMDB API key to the .env file:

     API_SECRET_TOKEN=YOUR_TMDB_API_KEY

5. Start the development server:

   npm run dev

   The application will be accessible at http://localhost:4321.

⚙️ Technologies Used

• Astro: A modern static site builder.
• React: For server side things.
• JavaScript: Just because the web is built using it.
• TMDB API: Provides movie data for the application.
• Pico CSS: For styling the webpage.
• Postman: Used for api request demo.
• ExcaliDraw: For brainstorming ideas.

🔗 Learn More 🏫

• Astro Explained Video
• Astro Documentation
• Astro Discord Community
• Astro Quick Start Course
• Picocss documentation
• ExcaliDraw

🔗 Other resources (add if you find anything)

• 5 ways to load data also watch this guy youtube channel because he has a lot of astro videos.
• Example themes from Astro own repo
• Live Code: Dev Learning Portfolio App in Astro

🔗 Presentation Links

• What is Astro on youtube
• Astro main page
• Youtuber with lots of great learning videos
• The Movie Database, used API
• Postman