jstgrowup / tweeter-giphy.com

This social media platform enables users to share GIFs along with captions, express appreciation for posts through likes, and gives users the ability to delete their own posts

Tweeter

Summary

This is Social media website where users can create an account , signin and than post GIF with a caption 😋 as well as like/dislike other people posts as well user can delete his/her own posts

Screenshots

• Signup Page

​

• Sign in Page

• Profile Page

• Edit Profile Modal

• TimeLine Page

• Dark Modes

Features

• Sign up and Sign in Page

  This website allows users to create their own account filling the details like username,fullname,emailid,password and login in using the required username, email id and passowrd and will search in the server the user if he find the user than only the user will be logged in. If the required details are missing, the user won't be able to login into the website. Without the users signed in, the user would not be able access the user profile page as well as timeline page.

• User Profile Page

  This is a user profile page where the user can see his own profile where the user can update his profile as well as delete his profile , Logout and see all the posts he has posted till that date.

• TimeLine Page

  This is a time line page where the user can see all the posts that other users had posted the user can post a caption along with a gif , by clicking on the gif button a modal will be shown where he can search a paticular type of GIF and then post it , the user can like other people posts and dislike them as well and everything will be updated in the backend in the real time

Tech Stacks for frontend

• NextJs
• CSS
• React
• React
• Redux
• ChakraUI

Teach Stacks for backend

• joi authentication
• MongoDB
• ExpressJS
• NodeJS
• Nodemailer

Video Explaination

• https://youtu.be/arOeeMtoNwo (Version 2.O)
• https://youtu.be/QeXO7GUo6LA (Version 1.O) ​

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.js.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.