Skip to content

Full stack, fully-featured social media web application using React, tailwind, Redux, Express, and Node.js. Implemented backend REST API server with Node.js and Express, user login and authentication, image uploads, cloud functions, deploying to Vercel

Notifications You must be signed in to change notification settings

SourabhJyotiDas/Instalife-Frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Hi, I'm Sourabh Jyoti Das! 👋

🔗 Links

portfolio linkedin twitter

🚀 About Me

MERN-STACK DEVELOPER 👨‍💻

InstaLife ( A Complete MERN-Stack Social Media Website)

Welcome to InstaLife, a vibrant and engaging social media platform designed to connect you with friends, family, and the world. We have created a dynamic and user-friendly website using a powerful tech stack to ensure a seamless and enjoyable social networking experience.

At the core of our platform, we have leveraged the MERN stack, combining MongoDB, Express.js, React.js, and Node.js to build a robust and scalable foundation. MongoDB, a NoSQL database, ensures efficient storage and retrieval of user data, while Express.js provides a flexible and reliable backend framework. React.js, a popular JavaScript library, enables us to deliver a responsive and interactive user interface, allowing you to engage with content in real-time. Node.js powers the server-side, facilitating fast and efficient data communication.

To manage the application's state and provide enhanced functionality, we have incorporated React Redux and Redux Toolkit. These libraries enable seamless data flow and efficient state management, ensuring a smooth and intuitive user experience. We have used Moment.js to handle date and time operations, allowing for accurate and customizable timestamps.

For seamless communication between the frontend and backend, we have utilized Axios, a promise-based HTTP client. This ensures fast and reliable data transfers, allowing you to share posts, comments, and media effortlessly. To enhance security, we have implemented Bcrypt and Jsonwebtoken for secure password encryption and authentication. Cookie-parser helps with handling and parsing cookies, providing a seamless user login experience.

To create a visually appealing and responsive design, we have utilized Tailwind CSS, a utility-first CSS framework. It allows us to create custom styles quickly and easily, ensuring a visually stunning and consistent user interface. We have also integrated Material-UI, a comprehensive UI component library, to provide a wide range of beautifully designed components that enhance the overall look and feel of our website.

To provide real-time notifications and alerts, we have incorporated React Toastify, an elegant and customizable notification library. Users can stay informed about new likes, comments, and interactions with their posts.

Lastly, we have optimized our development process with Concurrently, allowing us to run multiple server and client processes simultaneously, improving performance and efficiency.

Join InstaLife today and connect with friends, share your moments, and explore a world of content in a seamless and visually captivating environment.

Install Dependencies/Packages

For Backend - npm install or npm i || ( Once install all the packages then start the server by using this commend "npm run start" )

For Client/Frontend - npm install ( Same goes for here once you install all the packages then start the server by using this commend "npm run start" )

ENJOY 🍉

Authors

  • 🥶 Instagram Click Here || 👻 Gmail Click Here

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

Demo

https://instalife.up.railway.app 🤞

For Production Build

To build this project run ( Remember only in client folder )

  npm run build

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

PORT

MONGO_URI

JWT_SECRET

SMPT_MAIL

CLOUDINARY_NAME

CLOUDINARY_API_KEY

CLOUDINARY_API_SECRET

Features

  • Fullscreen mode
  • Customize your user profile
  • Responsive Design
  • Share Your Memories
  • Authentication
  • Image uploads
  • Make posts, like them and add comments
  • User login, sign up, and authentication

Feedback

If you have any feedback or Suggestion, please reach out to me at [email protected]

Other Common Github Profile Sections

👩‍💻 I'm currently working on Some Major Projects.

🧠 I'm currently learning MERN Stack

🛠 Skills

C++, Javascript, HTML, CSS, React, Next, Tailwind etc...

Installation

Install my-project with npm

  1st npm install 
  2nd cd backend/ npm install 

Logo

Tech Stack

Client: React, Redux, TailwindCSS

Server: Node, Express

Usage/Examples

import Component from 'my-project'

function App() {
  return <Component />
}

Support

For support, email [email protected] or Connect via Instagram .

About

Full stack, fully-featured social media web application using React, tailwind, Redux, Express, and Node.js. Implemented backend REST API server with Node.js and Express, user login and authentication, image uploads, cloud functions, deploying to Vercel

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published