The Social Network

A social media network aimed to connect people with similar hobbies.

Folder Structure • Etymology • Key Features • How To Use • API • Credits • Architecture Diagram • License

Folder Structure

.
├── .github/workflows
├── backend                      # Nest JS Microservices, MongoDB, Redis and Docker server folder
├── client                       # Angular workspace includes projects of users website and admins website folder
├── postman                      # All Api documentation
├── .gitignore
├── LICENSE
├── README.md
├── docker-compose.prod.yml
├── logo.png
└── package.json

Etymology

The naming is inspired from the movie The Social Network (2010), it has nothing to do if I liked it or not, it just when I was looking for a name for this project I was like "this a networking website and there's a movie of this theme thus why not"

Key Features

• JWT token authentication (access token store in memory, and refresh token store in cookie)
• Contact us
• Email verification and welcome on verification
• Auto refresh JWT before it expires
• Upload profile images to a CDN
• Change password
• Edit profile
• Delete account
• View profile
• Role based authorization
• Form validation
• Proteced route navigation from unsaved form
• Microservices architecture
• Container presentation pattern
• Docker compose integration for local development and production
• Password hashing
• Login/register
• Nginx configured for Angular routing
• Let's Encrypt HTTPS certificates with Certbot
• GitHub actions for CI/CD
• Pagination

How To Use

Developing

Clone Project

To clone and use this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/AmineAML/TheSocialNetwork.git

Configuration

An example of environments variables do exist in /backend folder as .env.example, change the name to .env and set them up for development

Docker

Nest JS depends on MongoDB as a database and Redis for communication between it microservices running from Docker containers started by a docker-compose.yml file

# Go into the repository
$ cd TheSocialNetwork

# Go into the backend folder
$ cd backend

# Start the containers
$ npm run docker:up

Nest JS Project

To run the backend side, you'll need NestJS CLI

# Go into the repository
$ cd TheSocialNetwork

# Nestjs app
$ cd backend

# Install dependencies
npm install

# Run the API gateway and all of the microservices
npm run start:dev:all

Angular Project

To run the client side, you'll need Angular CLI

# Go into the repository
$ cd TheSocialNetwork

# Angular app
$ cd client

# Install dependencies
npm install

# Run the site app
ng serve site

• Note: you must edit proxy.conf.json with your api port

Deploying

This stack can be adjusted and used with several deployment options that are compatible with Docker Compose, but it's designed to be used in a Linux server with pure Docker, a Nginx reverse proxy and handling HTTPS certificates with Certbot

Main steps involves, starting an Nginx Docker Container and making it part of a network (this is important, you can check the docker-compose.prod.yml we added all containers in a network named "production"), then making nginx configuration file to redirect request with your domain to the Angular app container

The other step, is to configure the nginx.conf which you could find in /client folder, this handles each request redirected from the reverse proxy to the container to again redirect those pointing to the api into the api-gateway, then you can set up your GitHub Secrets, add your server to the self-hosted runners (which both you can find them respectively under your repository's settings as Actions and Secrets) and configure your GitHub workflow to build and deploy the app

We are using MongoDB Atlas, and install Docker and Docker Compose on your server

API

You can find a Postman file of a collection with all API endpoint in postman folder, here is an overview of all API endpoints

Accounts

Method	URL	Description
GET	/api/v1/users/user/id/:id	User data by id
GET	/api/v1/users/user/username/:username	User data by username
GET	/api/v1/users/user	Authenticated user data
GET	/api/v1/users/query?search_term=:hobby	Search by query (optional: page and limit)
GET	/api/v1/users/confirm/:auto_generated_string	Confirm new email
GET	/api/v1/users/interests	All interests sorted by popularity
POST	/api/v1/users/user	Add new user
POST	/api/v1/users/login	Login
POST	/api/v1/users/refresh_token	Refresh access token
PUT	/api/v1/users/user/:id	Update user
PUT	/api/v1/users/logout	Logout
PUT	/api/v1/users/confirm/email	Resend email confirmation
PUT	/api/v1/users/user/change/password	Change password
DELETE	/api/v1/users/user/:id	Account removal

Images

Method	URL	Description
GET	/api/v1/images/image/:id	All user profile images
POST	/api/v1/images/image/upload	Upload profle image
DELETE	/api/v1/images/image/:id	Image removal

Reports

Method	URL	Description
GET	/api/v1/reports/report/:id	report by its id
GET	/api/v1/reports	All reports
POST	/api/v1/reports/report	Add new report
PUT	/api/v1/reports/report/:id	Modify report

Mailer

Method	URL	Description
POST	/api/v1/mailer/contact	Submit contact us email

Credits

This software uses the following open source packages/frameworks:

• Node.js
• Angular
• ngneat Tailwind
• RxJs
• NestJS
• Bcrypt
• Mongoose
• Cookie-parser

And:

• Mailing by Sendgrid
• Image CDN by Imagekit
• Authentication by JWT
• Illustrations by unDraw
• Icons by Font Awesome

Also:

• Docker
• Database by MongoDB
• Microservices communication by Redis
• Reverse proxy by Nginx
• Certbot
• CI/CD by GitHub Actions
• Server by OCI
• DNS Netlify
• Postman

Architecture diagram

C4 Model Diagram

License

This software is licensed under the MIT © Amine AMELLOUK

amineamellouk.com  ·  GitHub AmineAML  ·  LinkedIn amine-amellouk