Mingle

Mingle is a social network developed as a project for my Bachelor of Science degree in Computer Science.

Usage

Prerequisites

Before running the project, ensure you have the following installed:

• Node.js (includes npm)

Running the Project

1. Clone the repository:

   git clone https://github.com/stav1236/Mingle.git

2. Navigate to the Mingle folder:

   cd Mingle

3. Navigate to the client folder:

   cd client

4. (client) Install dependencies:

   npm install

5. (client) Build project:

   npm run build

6. Navigate back to the server folder:

   cd ../

7. (server) Install dependencies:

   npm install

8. (server) Run the server:

   npm run dev

Optional: You can run tests for the server with npm run test.

NOTE: It is also possible to run the client service without doing a build by running npm run dev in the client directory.

Features

• Auth:

  • User registration and login by username and password.
  • auth by using an external source (google).
  • Usage of JWT including a Refresh token.
  • Remembering a logged-in user.
  • Ability for the user to log out.

• User Profile Screen:

  • Displaying user information including a photo.
  • Editing options (including image).

• Content Display:

  • REST API preparation of digital cryptocurrencies.

• Content Sharing:

  • Users can upload information to the application including text and images.
  • Other users can see the uploaded information.
  • Users who uploaded the content can update, delete, and edit their posts.
  • Users can view their uploaded content on their profile page.
  • Users can comment on the content of other users.

• HTTPS with Certificates

• Light/Dark Mode Toggle

Environment Variables

Server Side:

• NODE_ENV: "development" | "production" | "test"
• PORT: Port on which the server will run
• DB_CONNECTION_STRING: Database connection string
• ACCESS_TOKEN_SECRET: Secret key for access token
• REFRESH_TOKEN_SECRET: Secret key for refresh token
• JWT_TOKEN_EXPIRATION: Expiration time for JWT token
• COIN_MARKET_CAP_API_TOKEN: API token for Coin Market Cap
• GOOGLE_CLIENT_ID: Client ID for Google OAuth

Client Side:

• VITE_APP_API_URL: Base URL of the API server.
• VITE_APP_UPLOADS_URL: URL endpoint for file uploads.
• VITE_APP_GOOGLE_CLIENT_ID: Client ID for Google OAuth.

API Documentation

The system uses Swagger to document the functionality of the project. Swagger can be accessed by running the project and navigating to the path /api-doc.

Technologies

The entire system is using TypeScript.

Client:

• React
• Material-UI as a design library
• React Query for API requests management
• React Router DOM for declarative routing in the application, enabling navigation between different pages/components.

Server:

• Express
• Jsonwebtoken: Library for creating and verifying JSON Web Tokens (JWT) used for user authentication and authorization.
• Mongoose: ODM (Object Data Modeling) library for MongoDB and Node.js, used for modeling application data and interacting with MongoDB databases.
• Multer: Middleware for handling multipart/form-data, primarily used for handling file uploads.
• Winston: Logging library for Node.js, used for logging server-side events and errors.
• Swagger: Framework for API documentation, used for generating interactive API documentation for Express-based APIs.
• Jest: Testing framework for Node.js, used for writing and running server-side tests.
• PM2: Process manager for Node.js applications, used for process management and deployment in production environments.

Folder Structure:

Client:

• Pages: Contains top-level React components representing different pages of the application.
• Assets: Stores static assets such as images, fonts, and stylesheets used in the application.
• Components: Houses reusable React components that are used across multiple pages or sections of the application.
• Contexts: Holds React context providers and consumers for managing global state and sharing data between components.
• Hooks: Contains custom React hooks for encapsulating logic and reusing stateful logic across components.
• Models: Defines TypeScript interfaces or classes representing data structures used in the application.
• Utilities: Houses utility functions or helper classes used across different parts of the client-side codebase.

Server:

Uses a three-tier architecture: Organizes the codebase into layers for separation of concerns and maintainability.

• Assets: Contains static assets or page templates used in the application.
• Common: Holds shared utility functions or constants used across different parts of the server-side codebase.
• Data: Contains data access layer components responsible for interacting with the database.
• Logic: Houses business logic components responsible for implementing application-specific logic and operations.
• Middleware: Contains middleware functions that intercept and process HTTP requests before they reach route handlers.
• Routes: Defines route handlers and endpoints for handling HTTP requests and serving API responses.

This folder structure helps maintain a well-organized codebase, improving code readability, and facilitating code reuse across different parts of the application.

License

This project is licensed under the MIT License.