Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mayankghatawal/social-media-app-web
Social Media Web/App by using NEXT.JS ( SnapGram )
https://github.com/mayankghatawal/social-media-app-web
api backend frontend github-config nextjs snapgram social-media
Last synced: about 2 months ago
JSON representation
Social Media Web/App by using NEXT.JS ( SnapGram )
- Host: GitHub
- URL: https://github.com/mayankghatawal/social-media-app-web
- Owner: MayankGhatawal
- Created: 2024-06-07T06:54:09.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-02T15:58:01.000Z (2 months ago)
- Last Synced: 2024-11-02T16:29:50.795Z (2 months ago)
- Topics: api, backend, frontend, github-config, nextjs, snapgram, social-media
- Language: TypeScript
- Homepage: https://social-media-app-web.vercel.app/
- Size: 2.43 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Snapgram
Welcome to Snapgram, a social media platform built with the MERN stack (MongoDB, Express, React, Node.js) and TypeScript. Snapgram allows users to share photos and interact with others through comments and likes, providing a seamless social experience.
## Table of Contents
- [Features](#features)
- [Tech Stack](#tech-stack)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Usage](#usage)
- [Project Structure](#project-structure)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
## Features
- User authentication and authorization (signup, login, logout)
- Post photos with captions
- Like and comment on posts
- Follow and unfollow users
- Real-time notifications
- Profile management
## Tech Stack
- **Frontend:**
- Next.js
- TypeScript
- Redux
- Material-UI
- **Backend:**
- Node.js
- Express
- MongoDB
- Mongoose
- JWT (JSON Web Tokens) for authentication
## Prerequisites
Before you begin, ensure you have met the following requirements:
- Node.js (>= 12.0.0)
- npm (>= 6.0.0) or yarn (>= 1.22.0)
- MongoDB (>= 4.0)
## Installation
1. Clone the repository:
```bash
git clone https://github.com/MayankGhatwal/social_media_app-main.git
cd social_media_app-main
```
2. Install dependencies for the frontend and backend:
```bash
# Navigate to the backend directory
cd backend
npm install
# Navigate to the frontend directory
cd ../frontend
npm install
```
3. Create a `.env` file in the `backend` directory and add the following environment variables:
```env
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret
```
## Usage
1. Start the backend server:
```bash
cd backend
npm run dev
```
2. Start the frontend development server:
```bash
cd frontend
npm run dev
```
3. Open your browser and navigate to `http://localhost:3000`.
## Project Structure
```plaintext
snapgram/
├── backend/
│ ├── src/
│ │ ├── controllers/
│ │ ├── models/
│ │ ├── routes/
│ │ ├── middleware/
│ │ └── utils/
│ ├── .env
│ ├── package.json
│ └── tsconfig.json
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── redux/
│ │ ├── services/
│ │ ├── styles/
│ │ ├── utils/
│ │ ├── pages/
│ │ │ ├── api/
│ │ │ ├── index.tsx
│ │ │ ├── _app.tsx
│ │ │ ├── _document.tsx
│ │ ├── public/
│ │ ├── package.json
│ │ ├── tsconfig.json
├── README.md
└── .gitignore
```
## Contributing
Contributions are always welcome! Please follow these steps to contribute:
1. Fork the repository.
2. Create a new branch (`git checkout -b feature/your-feature-name`).
3. Make your changes.
4. Commit your changes (`git commit -m 'Add some feature'`).
5. Push to the branch (`git push origin feature/your-feature-name`).
6. Open a pull request.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Contact
If you have any questions, feel free to contact us at [[email protected]](mailto:[email protected]).
Happy coding!