Social Sphere

An awesome social media application based on website
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Contributing
4. License
5. Contact
6. Acknowledgments

About The Project

Welcome to the Social Sphere Github repository! Here, you'll find the source code for our sleek and sophisticated social media application. Built with modern technologies and a focus on user experience, our application aims to provide users with an effortless socialize experience.

back to top

Built With

Main technology used to built this application are listed below:

• Typescript
• React.js
• Tailwind CSS
• Node.js
• Express.js
• MongoDB
• Docker

back to top

Getting Started

To get started with this project locally, follow below steps:

Prerequisites

Make sure you have Docker, Node.js, and package manager (either npm or yarn) installed

FYI: This project uses yarn as the package manager, but you're free to use npm too.

Installation

Below steps will guide you through the local installation process of this application

1. Clone the repo

   git clone https://github.com/blesten/social-media.git
   

2. Complete the .env variable at /server directory Rename .env.example file at /config directory become .env, then fill the value for every key. Below is the guideline for filling the .env value:
   

   Key	What to Fill	Example Value
   PORT	Your server port	5000
   CLIENT_URL	Your client URL	http://localhost:3000
   MONGO_URL	Your MongoDB connection URL	mongodb+srv://username:password@main.14znatw.mongodb.net/DBName?retryWrites=true&w=majority
   ACCESS_TOKEN_SECRET	Your JWT access token secret	NzeWG39JJNWASRKTeM85Ki77yZbdXZapvfIfepxz7d2WG
   REFRESH_TOKEN_SECRET	Your JWT refresh token secret	KS3VuMkQkGzzQ5BhMyxgpGV2xelxR7B7UummWAG5r5c
   MAIL_CLIENT_ID	Your mail client ID	2678-dfs.apps.googleusercontent.com
   MAIL_CLIENT_SECRET	Your mail client secret	GOCSPX-Jj03432-fdsjfdfdkLO
   MAIL_REFRESH_TOKEN	Your mail refresh token	1//020FT6IlI
   SENDER_MAIL_ADDRESS	Your email address to send email	test@testmail.com

3. Complete the key.ts variabel at /client directory Rename key.example.ts file at /config directory become key.ts, then fill the value for every key. Below is the guideline for filling the key.ts value:
   

   Key	What to Fill	Example Value
   CLOUDINARY_POSTS_FOLDER_ID	Your Cloudinary "products" folder ID for this project	abcdefgh
   CLOUDINARY_USERS_FOLDER_ID	Your Cloudinary "users" folder ID for this project	abcdefgh
   CLOUDINARY_CLOUD_NAME	Your Cloudinary cloud name	abcd8efgh

4. Go to docker-compose.yml at root directory and replace the ports value at the server section to the port value at yout .env file. For example, your PORT value at .env is 5000, so the ports value at the docker-compose.yml is 5000:5000
5. Go to package.json at /client directory and replace the proxy port to the port value at your .env file. For example, your PORT value at .env is 5000, so the proxy value is http://server:5000
6. Open your terminal, and cd to the root directory, then run docker-compose build command
7. Lastly, run docker-compose up command at your terminal to start the application

back to top

Contributing

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

back to top

License

Distributed under the MIT License. See LICENSE.txt for more information.

back to top

Contact

LinkedIn: Stanley Claudius

Project Link: https://github.com/blesten/social-media

back to top

Acknowledgments

Special thanks to:

• Othneildrew for providing an amazing README template.
• Tailwind CSS for providing CSS framework to be used in this application.
• React Icons for providing icon to be used in this application.

back to top