Threads Lite - Unleashing Ideas, Connecting Minds

Welcome to Threads Lite, your go-to social media platform for sharing thoughts and ideas with the world! Our platform is designed to provide a seamless experience, combining the power of Node.js, React, GraphQL, and MongoDB to bring your social networking vision to life.

Description

This small-scale Node + React application uses Apollo Client for GraphQL and React Router for routing. The application is styled using SCSS. The application is deployed on Vercel.

Tech Stack

1. Node.js
   • Description: Fueling the Backend Engine, Node.js handles requests, processes data, and orchestrates the communication flow with efficiency.
   • Modules Used: Express, Mongoose, JWT, dotenv, and more.
2. GraphQL + Apollo Server
   • Description: The cutting-edge query language for APIs and a runtime for executing queries with existing data provide an efficient alternative to REST combined with a community-driven GraphQL server that seamlessly works with any GraphQL schema and can be deployed in any environment.
   • Usage: We leverage ApolloServer from 'apollo-server-express' and various plugins from 'apollo-server-core' to create a GraphQL server and define our schema and resolvers for effective data communication.
3. MongoDB
   • Description: A powerful, cross-platform document-oriented database program that stores and retrieves data efficiently.
   • Connection: We use Mongoose to connect with our MongoDB database.
4. JWT (JSON Web Tokens)
   • Description: Compact, URL-safe means representing claims for secure data transfer between parties.
   • Purpose: Primarily utilized for authentication to ensure a secure user experience.
5. Express
   • Description: A minimal and flexible Node.js web application framework, providing a robust set of features for web and mobile applications.
   • Role: Powers our server, handling requests from the client.
6. React
   • Description: A JavaScript library for building user interfaces, particularly effective for single-page applications.
   • Implementation: Drives our front end, providing an interactive and dynamic user experience.
7. SCSS
   • Description: A preprocessor scripting language compiled into Cascading Style Sheets (CSS) for enhanced styling capabilities.
   • Application: Used to style our front end, ensuring an aesthetically pleasing and modern look.
8. React Router
   • Description: A standard routing library for React, crucial for handling navigation seamlessly within our application.
   • Role: Manages routing to enhance the user experience.

Deployment

Our application is deployed on Vercel, ensuring a reliable and scalable platform for users to access Threads Lite effortlessly.

Explore Threads Lite and connect with the world through a cutting-edge social media experience!

Environments

Environment	Branch	URL	Server/Playground URL
Production	master	https://threads-lite-ms.vercel.app/
Local		http://localhost:3000	http://localhost:4000/graphql

Local Environment Setup

Follow these steps to set up the project locally.

Prerequisites

Installation

1. Clone the repository

git clone [email protected]:Mukulsingh27/threads-lite.git

2. Install NPM packages in both root and client directory

npm install

3. Create a .env file in the root directory and add the following environment variables

MONGO_DB_URL =<CONNECTION_URL>
JWT_SECRET_KEY =<KEY>
PORT =<PORT>
SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_MAIL=<EMAIL_ID>
SMTP_PASSWORD=<APP_PASSWORD>
CLIENT_URL=http://localhost:3000

4. Start the server from the root directory

npm run dev

5. Start the client from client directory

cd client && npm run start

Notes:

• Change the ApolloClient URI in client/src/index.js to http://localhost:<PORT>/graphql before starting the client while running the application locally. And change it back to /graphql before creating a production build.

• The client URI in .env is different for production (https://threads-lite-ms.vercel.app/) and local (http://localhost:3000/graphql) environments.

Usage

Open http://localhost:3000 to view the application in the browser.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Steps to contribute

1. Fork the repository
2. Create a new branch from the master
3. Make changes and commit them
4. Push the changes and open a pull request

Screenshots

For more visual insights, explore the screenshots in the Client Folder README.md showcasing the Threads Lite interface, highlighting key features and design elements.