Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andrenormanlang/mindsmesh-nestjs-react-19
Nest JS API: https://targetapp-07664dff2773.herokuapp.com/api
https://github.com/andrenormanlang/mindsmesh-nestjs-react-19
cloudinary educational jwt-passport-authentication multipart-form nestjs-backend reactjs shadcn-ui
Last synced: about 1 month ago
JSON representation
Nest JS API: https://targetapp-07664dff2773.herokuapp.com/api
- Host: GitHub
- URL: https://github.com/andrenormanlang/mindsmesh-nestjs-react-19
- Owner: andrenormanlang
- Created: 2024-08-09T21:27:59.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-10-31T20:32:28.000Z (2 months ago)
- Last Synced: 2024-10-31T21:25:56.548Z (2 months ago)
- Topics: cloudinary, educational, jwt-passport-authentication, multipart-form, nestjs-backend, reactjs, shadcn-ui
- Language: TypeScript
- Homepage: https://mindsmesh.vercel.app/
- Size: 4.03 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 MindsMesh
## 🚀 Overview
Welcome to **MindsMesh** — an innovative online platform designed for creatives (slightly hipsters 🧑🎨), tech enthusiasts 💻, and developers 👩💻 to offer their skills and get in touch with employers. The platform features user authentication, profile management, skill offerings and a live chat system for seamless communication between employers and freelancers.
## 🌟 Features
### 🔒 User Authentication & JWT
- **Registration & Login:** Secure user authentication using JWT.
- **Email Verification:** Verify user email addresses for account activation.
- **Password Reset:** Reset forgotten passwords via email.
### 👤 User Profiles
- **Profile Management:** Users can create and update profiles with bio, photo, images examples of there work, skills offered, etc.
- **Public Profiles:** Profiles are accessible publicly with user statistics.
### 🎯 Skill Offering
- **Create Listings:** Users can offer skills by creating listings with title, description, price, and availability.
- **Categories:** Skills are categorized (e.g., frontend developer, creative script writer, illustrator, etc..).
### 💬 Using the Chat System
### As an Employer 👔
- 💬 Click on the Chat button on a freelancer's profile to initiate a conversation
- 🆕 A chat room will be created if it doesn't already exist
- ⚡ Send and receive messages in real-time
### As a Freelancer 👩💻
- 🚪 Click on the Rooms button on your own profile to view all chat rooms with employers
- 🤝 Join a chat room to communicate with the employer
- 📱 Manage your chat rooms and conversations
### Features ✨
- **Real-Time Messaging** 📨: Messages are sent and received instantly
- **Message Status Indicators** ✔️: See when your messages are sending, sent, or if there was an error
- **Connection Status** 🔌: Visual indicators show if you are connected or reconnecting
## 🛠️ Tech Stack
### 🔧 Backend (NestJS)
- **NestJS:** A powerful Node.js framework for building scalable and efficient server-side applications, providing an organized structure and TypeScript support out of the box.
- **TypeORM:** An ORM for TypeScript and JavaScript (ES7, ES6, ES5), allowing for database management with PostgreSQL, making data modeling easier and more intuitive.
- **Passport.js:** Middleware for authentication in Node.js applications, supporting various authentication strategies, with a focus on JWT for secure API access.
- **Swagger:** A tool for documenting API, enabling easy visualization and interaction with API endpoints directly from a browser.
- **Socket.IO :** A library for real-time, bidirectional, and event-based communication, making it ideal for applications that require live updates, such as chat apps.
### 🎨 Frontend (React 19 RC / OBS: React 18 for the moment)
**🧙♂️👨💻 Upon it´s release I will be migrating this project to use React 19!**
- **React 19 :** The latest upcoming version of the most popular front-end library, React, introducing several new features and improvements for building user interfaces. Some anticipated features include:
- ***Server Components:*** Enhances server-side rendering by allowing you to build components that run exclusively on the server, reducing the need for client-side JavaScript.
- ***Concurrent Rendering Improvements:*** Better handling of asynchronous tasks, making UIs more responsive by allowing React to interrupt rendering and continue later when needed.
- ***Simplified State Management:*** Improvements in the way React handles state, making it more intuitive and reducing the complexity of managing state across components.
- **ShadcnUI Components & Tailwind CSS:** A powerful combination for styling and building UI components. ShadcnUI provides a set of highly customizable and accessible UI components using Tailwind syntax.
- **Axios:** Promise-based HTTP client for making API requests that simplifies the process of handling HTTP requests, supporting features like request and response interception, automatic JSON data transformation, and error handling.
### 🗄️ Database
- **PostgreSQL:** Relational database management.
- **Redis (Optional):** Caching and session management.
## 🧑💻 Development Steps
1. **Project Setup:**
- Initialize NestJS project.
- Set up PostgreSQL database.
- Configure environment variables.
2. **User Authentication:**
- Implement JWT-based authentication.
- Set up role-based access control.
3. **User Profile Management:**
- APIs for profile creation and updates.
- Implement file upload and carousel for images.
4. **Skill Offering:**
- Design skill offerings schema.
- CRUD operations for skill listings.
5. **Frontend Development:**
- Build UI with React/Next.js.
- Integrate with backend API.
- Implement client-side authentication and state management.
6. **Real-Time Features (Optional):**
- Implement messaging with Socket.IO.
7. **Testing & Deployment:**
- Write unit and integration tests.
- Set up CI/CD pipelines.
## 🎓 Learning Outcomes
- **NestJS:** Building RESTful APIs, managing databases, handling authentication.
- **TypeORM:** Mastering ORM tools for database interactions.
- **Frontend Development:** Building responsive UIs with React/Angular.
- **DevOps:** Containerization, CI/CD, and deployment practices.
- **Advanced Features:** Real-time communication.
## 🚀 Getting Started
1. **Clone the Repository:**
```bash
git clone https://github.com/andrenormanlang/mindsmesh-nestjs-react-19.git
```
2. **Install Dependencies:**
```bash
cd mindsmesh-nestjs-react-19/
npm install
```
3. **Set Up Environment Variables:**
- Create a `.env` file in mindsmesh-nestjs-react-19/apps/api/ and add your configuration for the following.
### Api
```env
FRONTEND_URL=http://localhost:5173
DATABASE_TYPE=
DATABASE_HOST=
DATABASE_PORT=5432
DATABASE_USERNAME=
DATABASE_PASSWORD=yourpassword
DATABASE_NAME=
DATABASE_URL=
JWT_SECRET=YourSuperSecretKey
JWT_EXPIRATION_TIME=
RESET_PASSWORD_SECRET=
RESET_PASSWORD_EXPIRES_IN=
CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
SENDGRID_API_KEY=
```
### Client
```env
VITE_BASE_URL=http://localhost:3000/api
VITE_BASE_URL_CHAT_EMPLOYER==http://localhost:3000
```
4. **For Local Testing Create and Access a PostgreSQL Database by CLI:**
```bash
# Connect to PostgreSQL
psql -U postgres
enter password
# Create your database and access your DB
CREATE DATABASE mindsmesh;
\c mindsmesh
# Create the necessary tables
CREATE TABLE users (
id SERIAL PRIMARY KEY,
email VARCHAR(255) UNIQUE NOT NULL,
username VARCHAR(255) NOT NULL,
password VARCHAR(255) NOT NULL,
isAdmin BOOLEAN DEFAULT false,
role VARCHAR(255) DEFAULT 'user'
);
CREATE TABLE skills (
id SERIAL PRIMARY KEY,
title VARCHAR(255) NOT NULL,
description TEXT,
price NUMERIC(10, 2) NOT NULL,
isAvailable BOOLEAN DEFAULT true,
user_id INTEGER REFERENCES users(id)
);
```
5. **Run and access the Application endpoints:**
### Backend
```bash
npm run start:dev
```
- Open `http://localhost:3000` in Postman or Insomnia.
- **Swagger Documentation:** Access the API documentation at `http://localhost:3000/api-docs`.
### Frontend
```bash
npm run start dev
```
- Open `http://localhost:5173` in your browser of choice.
## 🤝 Contributing
Feel free to fork this repository, create a new branch, and submit a pull request with your changes.