Epic Movie Quotes is a platform where users can register, log in, and dive into a vast collection of movies and their quotes. Users can register or login using Google OAuth as well. Once logged in, users are greeted with their personalized dashboards, where they can explore a variety of features.

Real-time updates keep users informed about the activity on their content, including likes and comments. Users have the flexibility to personalize their profiles and contribute their own content to enrich the collection.

Features, such as multilinguality, password reset, email verification and data searching are also supported.

Table of Contents

• Prerequisites
• Tech Stack
• Getting Started
• Project Structure
• Resources

Prerequisites

• npm@8.19 and up
• node@16.18 and up
• typescript@16.18 and up

Tech Stack

• Next - The React Framework for the Web
• Tailwind - CSS Framework
• Pusher - Real-time messaging and event-driven platform
• React Hook Form - Performant and extensible React forms
• React Query - Data fetching and caching library

Getting Started

1. First of all you need to clone Epic Movie Quotes repository from github:

git clone https://github.com/RedberryInternship/elene-metreveli-epic-movie-quotes-front

2. Next step requires you to run npm install in order to install all the dependencies.

npm install

3. after you have installed all the dependencies, it's time to run the project.

npm run dev

Project Structure

├── public
├── src
│   ├── components
│   │   ├── movie
│   │   │   ├── AddQuoteFromMovies
│   │   │   │   ├── AddQuoteFromMovies.tsx
│   │   │   │   ├── index.ts
│   │   │   │   ├── types.d.ts
│   │   │   │   └── useAddQuoteFromMovies.tsx
│   │   ├── newsfeed
│   │   │   ├── NewsItem
│   │   │   │   ├── NewsItem.tsx
│   │   │   │   ├── index.ts
│   │   │   │   ├── types.d.ts
│   │   │   │   └── useNewsItem.tsx
│   │   └── index.ts
│   ├── helpers
│   ├── hooks
│   │   ├── Newsfeed
│   │   │   ├── useNewsFeed.tsx
│   │   │   └── index.tsx
│   │   ├── Profile
│   │   │   ├── useProfile.tsx
│   │   │   └── index.tsx
│   │   └── index.ts
│   ├── pages
│   │   └──dashboard
│   │   │   ├── movies
│   │   │   │   ├── [id].tsx
│   │   │   │   └── index.tsx
│   │   │   ├── newsfeed.tsx
│   │   │   └── profile.tsx
│   │   └── index.ts
│   ├── store
│   ├── types
│   └── services
├── .eslintrc.json
├── .gitignore
├── .prettierrc.json
├── postcss.config.js
├── tailwind.config.js
├── next.config.js
├── next-env.d.ts
└── next-i18next.config.js
└── tsconfig.json

For more information about project standards, take a look at these docs:

• Next

Resources

Figma Design