mehtapugur / movie-mate

Movie Mate is a platform where registered users can add, share, delete, update their favorite movies and actors, like and comment on other users' posts.

About  |  Technologies  |  Features  |  Screenshots  |  Database  |  Setup  |    Structure  |  History  |  License

📲 About

Movie Mate is a platform where registered users can add, share, delete, update their favorite movies and actors, like and comment on other users' posts.

🌏 DEMO LINK 🌏

⚙️ Technologies

• HTML
• CSS
• Bootstrap
• TypeScript
• NodeJS
• Express.js
• MySQL
• TypeORM
• JWT
• Google Sign-In
• EJS
• Font Awesome
• Heroku

Database operations of this application were designed with MySQL and TypeORM.
EJS was used for front-end design.
Font Awesome was used for the icons used. TypeScript and Node.js were used for background processes.
CSS and Bootstrap were used for styling.

✨ Main Features

• Data informations were kept in MySQL database and updated dynamically.
• Users must register to use the application.
• The data in the Shared table is listed on the Dashboard page.
• Users can change and delete the information of the post they have saved.
• The user cannot share the same post twice.
• If the user makes a change to the post they shared, this change will also be shown on the Dashboard page.
• The user cannot register more than once with the same email.
• The post that the user deleted is also deleted on the Dashboard page if it has been shared before.
• Movies and actors saved by the user are displayed on the user-specific Movies and Actors pages.
• Users can delete, update, share the movie or player they recorded.
• Users can like and comment on shared posts.
• The same user cannot like a post more than once, but can comment more than once.

📸 Screenshots

Movie Mate

• The application has home page for login.
• Users can register to the application with signup button.
• Registered users can login to the application with login button.
• When users log in, they will see the Dashboard page with shared posts.
  
  

Login	Signup

• Users must first register to be able to login to the application.
• Registered users can login with their email and password.
• To register, the password must be a minimum of 8 characters.
• Users can log into the app with their Google or Facebook account. These users are also registered in the database.
• Unfortunately, Google broke my design as the login button is used by default. :)
  
  

Google Auth	Facebook Auth

• Users can log in with their Google or Facebook accounts.
• User information is saved in the database.
  
  

Dashboard

• It is the first page the user sees after logging in.
• Posts shared by users are listed here, with the most recent post at the top.
• The information that the user who presses the like button likes the post is saved and directed to the post page.
• The user who presses the comment button is directed to the post page.
• Information that the added post is a movie or an actor is displayed next to the post's name.
• When users click on the post name, they are directed to the post specific page.
• The person who shared the post is shown at the bottom right.
• Note: The first 200 characters of the descriptions of the posts are displayed on the Dashboard page.
  
  

Movies	Actors

• Users can go to the Movies page with the movies button.
• Users can go to the Actors page with the actors button.
• Users can log out by pressing the Logout button.
• Users can go to the Dashboard page by clicking the Movie Mate (M) icon.
• Favorite movies and actors saved by users are listed on these pages.
• Users can delete posts they have saved. If the deleted post has been shared before, it will be removed from the Dashboard page.
• Users can update their saved posts. If the updated post has been shared before, it will also be updated on the Dashboard page.
• Users can share their saved posts. The same post cannot be shared more than once.
• These pages also show the number of the user's favorite movies or actors.
  
  

Add Movie	Add Actor

• Users can add their favorite movies and actors through these pages.
• The name must be a maximum of 50 characters and the description a maximum of 500 characters.
  
  

Edit	Post Page

• Users can update their saved posts. If the updated post has been shared before, it will also be updated on the Dashboard page.
• All content is displayed on posts specific pages.
• Users can comment on the post and the comments are displayed in order.
• Next to the comment is the author of the comment.
  
  

JWT

• Json Web Token is created for logged-in users.
• The token is deleted when the user logs out.
  
  

🗳️ MySQL Database

User Table	Comments Table

Data Table	Likes Table

Shared Table

• 5 tables were used for the project.
  
  

💻 Setup

• To download this project, Git must be installed on your computer (or you can download zip file). And you must use MySQL Workbench. After these installations open the git terminal. And write the following expression:

git clone https://github.com/mehtapugur/Movie-Mate
cd Movie-Mate
npm install

• Create an .env file for parameters and create database for datas. And run these comment on comment line:

npm start

• Then open http://localhost:5000/ on your browser.

📁 Project Folder Structure

Movie Mate
.
│
├── src
│    └── controllers
│       └── pageController.ts
│       └── userController.ts
│    └── entity
│       └── comments.entity.ts
│       └── data.entity.ts
│       └── likes.entity.ts
│       └── shared.entity.ts
│       └── user.entity.ts
│    └── middlewares
│       └── authMiddleware.ts
│    └── routes
│       └── pageRoute.ts
│       └── userRoute.ts
│    └── types
│       └── global.type.ts
│    └── app.ts
│
├── views
│    └── partials
│       └── _footer.ejs
│       └── _header.ejs
│       └── _navigation.ejs
│    └── actors.ejs
│    └── add_actor.ejs
│    └── add_movie.ejs
│    └── dashboard.ejs
│    └── data.ejs
│    └── edit.ejs
│    └── index.ejs
│    └── login.ejs
│    └── movies.ejs
│    └── signup.ejs
│
├── .env
├── .gitignore
├── Procfile
├── README.md
├── ormconfig.json
├── package-lock.json
├── package.json
├── project-diary.md                 
├── tsconfig.json   
│

🚀 Project History

Here, the project has a development period in Turkish. You can read if you want.

📝 License

This project is under the terms of the MIT license.

Contact: LinkedIn