TypeScript Version of MERN-Stack Social Network Built Using Next.JS, Styled-Components, MondoDB, Node.JS & Express.JS

This is the Typescript version of a MERN-Stack social network web application to connect Egyptians abroad built using Next.JS & Styled-Components in Frontend and Node.JS, Express.JS & MongoDB in Backend.

Take a look at the live version here: https://egyptians-abroad-typescript.vercel.app 😍

Take a look at the backend repo here: https://github.com/AhmedTohamy01/Egyptians-Abroad-Backend 😍

Table of Contents

• Project Walk-Through
  • Landing Page
  • Sign-in Page
  • Sign-up Page
  • Home Page
  • Profile Page
  • Public Profile Page
  • Profile Edit Page
  • Post Page
  • New Post Page
  • New Comment Page
  • New Message Page
• Live Demo
• Technology Used
• How To Use
• Show Your Support
• Acknowledgments
• License

Project Walk-Through

Landing page

Sign-in Page

Sign-up Page

Home Page

Profile Page

Public Profile Page

Profile Edit Page

Post Page

New Post Page

New Comment Page

New Message Page

Live Demo

Take a look on the live version here: https://egyptians-abroad-typescript.vercel.app 😍

Technology Used

I built this project using the following tools & techniques:

• Next.JS
• Styled-Components.
• Node.JS
• Express.JS
• MongoDB.

How To Use

To be able to use this react app locally in a development environment you will need the following:

1. You will need Git and Node.js installed on your computer.

2. Then From your terminal, you should do the following:

# Clone this repository
git clone https://github.com/AhmedTohamy01/Egyptians-Abroad-Frontend

# Go into the repository
cd Egyptians-Abroad-Frontend

# Install dependencies
npm install 

3. From ./api/axiosAPI.js file in your local repo, connect to the backend server by adjusting the getBaseUrl function to be like the following:

const getBaseUrl = () => {
	return 'https://egyptians-abroad-backend.herokuapp.com'
}

4. Run the app.

# Run the app
npm run dev

5. Now you can see the project in your browser as you see in the live demo link. Happy Hacking!

Show Your Support

Give a ⭐️ if you like this project!

Acknowledgments

Hat tip to everyone helped me to learn the techniques used in building this project.

License

MIT License.