|
1 | | -# 🚀 Projexa |
2 | | - |
3 | | -Projexa is a **collaborative project management platform** designed to help teams plan, track, and manage work efficiently. |
4 | | - |
5 | | -It is built as a **real-world SaaS-style application**, focusing on scalability, clean architecture, and modern development practices. |
6 | | - |
7 | | ---- |
8 | | - |
9 | | -## 🌟 Vision |
10 | | - |
11 | | -To build a production-ready project management system similar to tools like **Jira, Notion, and ClickUp**, while maintaining clean code, strong architecture, and extensibility. |
| 1 | +<div align="center"> |
| 2 | + <a href="https://www.projexa.haranck.online/"> |
| 3 | + <img src="https://img.shields.io/badge/Projexa-Project%20Management-blue?style=for-the-badge&logo=react" alt="Projexa Logo"> |
| 4 | + </a> |
| 5 | + <h1 align="center">Projexa</h1> |
| 6 | + <p align="center"> |
| 7 | + <strong>A Next-Generation Project Management & Collaboration Platform</strong> |
| 8 | + <br /> |
| 9 | + <a href="https://www.projexa.haranck.online/">View Demo</a> |
| 10 | + · |
| 11 | + <a href="https://github.com/your-username/projexa/issues">Report Bug</a> |
| 12 | + · |
| 13 | + <a href="https://github.com/your-username/projexa/issues">Request Feature</a> |
| 14 | + </p> |
| 15 | +</div> |
12 | 16 |
|
13 | 17 | --- |
14 | 18 |
|
15 | | -## 🛠️ Tech Stack |
| 19 | +## 🌟 About The Project |
16 | 20 |
|
17 | | -### Frontend |
18 | | - |
19 | | -* React |
20 | | -* TypeScript |
21 | | -* Tailwind CSS |
| 21 | +Projexa is an advanced, full-stack project management and collaboration platform designed to streamline team workflows, enhance communication, and boost productivity. |
22 | 22 |
|
23 | | -### Backend |
| 23 | +Built with modern web technologies, Projexa offers real-time collaboration, AI-powered insights, integrated video meetings, and intuitive drag-and-drop task management interfaces. |
24 | 24 |
|
25 | | -* Node.js |
26 | | -* Express.js |
27 | | -* TypeScript |
28 | | -* MongoDB |
29 | | -* JWT Authentication |
| 25 | +**Live Demo:** [https://www.projexa.haranck.online/](https://www.projexa.haranck.online/) |
30 | 26 |
|
31 | | -### Architecture |
| 27 | +### ✨ Key Features |
32 | 28 |
|
33 | | -* Clean Architecture |
34 | | -* SOLID Principles |
35 | | -* Dependency Injection |
36 | | -* Modular & Scalable Design |
| 29 | +- **📊 Kanban Boards:** Drag-and-drop task management using `@dnd-kit`. |
| 30 | +- **💬 Real-time Collaboration:** Instant updates and communication powered by `Socket.IO`. |
| 31 | +- **📹 Integrated Video Meetings:** Seamless team meetings via Jitsi integration. |
| 32 | +- **🤖 AI Capabilities:** Smart task summarization and assistance using OpenAI and Google Generative AI. |
| 33 | +- **📈 Analytics & Reporting:** Interactive charts and project insights with `Recharts`. |
| 34 | +- **💳 Premium Features:** Subscription and billing management via Stripe. |
| 35 | +- **☁️ Cloud Storage:** Secure file attachments and storage using AWS S3. |
| 36 | +- **🔔 Notifications:** Real-time push notifications and automated email alerts. |
37 | 37 |
|
38 | 38 | --- |
39 | 39 |
|
40 | | -## ✨ Core Features |
| 40 | +## 💻 Tech Stack |
41 | 41 |
|
42 | | -* 🔐 User authentication & authorization |
43 | | -* 🏢 Workspace-based project management |
44 | | -* 👥 Role & permission management |
45 | | -* 📌 Projects, tasks, and issues tracking |
46 | | -* 💬 Team collaboration & activity logs |
47 | | -* 🔔 Real-time notifications system |
48 | | -* 📅 Meetings & scheduling |
49 | | -* 💳 Subscription & payment handling |
50 | | -* 🛠️ Admin dashboard & controls |
| 42 | +Projexa leverages a powerful, modern technology stack to ensure scalability, performance, and an exceptional user experience. |
51 | 43 |
|
52 | | ---- |
53 | | - |
54 | | -## 🧠 Architecture Highlights |
| 44 | +### Frontend |
| 45 | +- **Framework:** React 19 (Vite) |
| 46 | +- **Language:** TypeScript |
| 47 | +- **Styling:** Tailwind CSS, Radix UI Primitives |
| 48 | +- **State Management:** Redux Toolkit, RTK Query |
| 49 | +- **Forms & Validation:** React Hook Form, Zod |
| 50 | +- **Drag & Drop:** dnd-kit |
55 | 51 |
|
56 | | -* Clear separation of concerns |
57 | | -* Domain-driven design principles |
58 | | -* Use cases for business logic |
59 | | -* Interface-based repositories |
60 | | -* Framework-independent core logic |
| 52 | +### Backend |
| 53 | +- **Runtime:** Node.js |
| 54 | +- **Framework:** Express.js |
| 55 | +- **Language:** TypeScript |
| 56 | +- **Database:** MongoDB (Mongoose) |
| 57 | +- **Caching & Queues:** Redis, BullMQ |
| 58 | +- **Real-time:** Socket.IO |
| 59 | +- **Architecture:** Clean Architecture with Dependency Injection (`tsyringe`) |
| 60 | + |
| 61 | +### External Services |
| 62 | +- AWS S3 (Storage) |
| 63 | +- Stripe (Payments) |
| 64 | +- OpenAI & Google Gemini (AI Integration) |
| 65 | +- Jitsi (Video Conferencing) |
61 | 66 |
|
62 | 67 | --- |
63 | 68 |
|
64 | | -## 📦 Getting Started |
| 69 | +## 🚀 Getting Started |
65 | 70 |
|
66 | | -### 1. Clone the Repository |
| 71 | +To get a local copy up and running, follow these simple steps. |
67 | 72 |
|
68 | | -```bash |
69 | | -git clone https://github.com/haranck/projexa.git |
70 | | -cd projexa |
71 | | -``` |
| 73 | +### Prerequisites |
72 | 74 |
|
73 | | ---- |
| 75 | +Ensure you have the following installed on your local machine: |
| 76 | +- Node.js (v18 or higher) |
| 77 | +- npm or yarn |
| 78 | +- MongoDB |
| 79 | +- Redis |
74 | 80 |
|
75 | | -### 2. Install Dependencies |
| 81 | +### Installation |
76 | 82 |
|
77 | | -#### Backend |
| 83 | +1. **Clone the repository** |
| 84 | + ```bash |
| 85 | + git clone https://github.com/your-username/projexa.git |
| 86 | + cd projexa/project_management |
| 87 | + ``` |
78 | 88 |
|
79 | | -```bash |
80 | | -cd backend |
81 | | -npm install |
82 | | -``` |
| 89 | +2. **Install Backend Dependencies** |
| 90 | + ```bash |
| 91 | + cd backend |
| 92 | + npm install |
| 93 | + ``` |
83 | 94 |
|
84 | | -#### Frontend |
| 95 | +3. **Install Frontend Dependencies** |
| 96 | + ```bash |
| 97 | + cd ../frontend |
| 98 | + npm install |
| 99 | + ``` |
85 | 100 |
|
86 | | -```bash |
87 | | -cd frontend |
88 | | -npm install |
89 | | -``` |
| 101 | +### Configuration |
90 | 102 |
|
91 | | ---- |
| 103 | +Create `.env` files in both the frontend and backend directories based on their respective `.env.example` configurations. |
92 | 104 |
|
93 | | -### 3. Setup Environment Variables |
| 105 | +**Backend required variables typically include:** |
| 106 | +- `PORT`, `MONGODB_URI`, `REDIS_URL` |
| 107 | +- `JWT_SECRET`, `AWS_ACCESS_KEY`, `AWS_SECRET_KEY`, `S3_BUCKET_NAME` |
| 108 | +- `STRIPE_SECRET_KEY`, `OPENAI_API_KEY`, `GEMINI_API_KEY` |
94 | 109 |
|
95 | | -Create a `.env` file in the **backend** folder: |
| 110 | +### Running Locally |
96 | 111 |
|
97 | | -```env |
98 | | -PORT=5000 |
99 | | -MONGO_URI=your_mongodb_connection |
100 | | -JWT_SECRET=your_secret_key |
101 | | -REDIS_URL=your_redis_url |
102 | | -``` |
103 | | - |
104 | | ---- |
| 112 | +1. **Start the backend server (Development Mode)** |
| 113 | + ```bash |
| 114 | + cd backend |
| 115 | + npm run dev |
| 116 | + ``` |
105 | 117 |
|
106 | | -### 4. Run the Project |
| 118 | +2. **Start the frontend application** |
| 119 | + ```bash |
| 120 | + cd frontend |
| 121 | + npm run dev |
| 122 | + ``` |
107 | 123 |
|
108 | | -#### Backend |
109 | | - |
110 | | -```bash |
111 | | -npm run dev |
112 | | -``` |
113 | | - |
114 | | -#### Frontend |
115 | | - |
116 | | -```bash |
117 | | -npm run dev |
118 | | -``` |
| 124 | +3. Open your browser and navigate to `http://localhost:5173` (or the port specified by Vite). |
119 | 125 |
|
120 | 126 | --- |
121 | 127 |
|
122 | 128 | ## 📁 Project Structure |
123 | 129 |
|
124 | | -``` |
| 130 | +Projexa follows a modular and clean architecture pattern. |
125 | 131 |
|
| 132 | +```text |
126 | 133 | projexa/ |
127 | | -│ |
128 | | -├── backend/ |
129 | | -│ ├── src/ |
130 | | -│ │ ├── application/ |
131 | | -│ │ ├── config/ |
132 | | -│ │ ├── domain/ |
133 | | -│ │ ├── infrastructure/ |
134 | | -│ │ ├── presentation/ |
135 | | -│ │ ├── shared/ |
136 | | -│ │ ├── types/ |
137 | | -│ │ └── server.ts |
138 | | -│ |
139 | | -├── frontend/ |
140 | | -│ ├── src/ |
141 | | -│ │ ├── axios/ |
142 | | -│ │ ├── components/ |
143 | | -│ │ ├── constants/ |
144 | | -│ │ ├── hooks/ |
145 | | -│ │ ├── lib/ |
146 | | -│ │ ├── pages/ |
147 | | -│ │ ├── routes/ |
148 | | -│ │ ├── services/ |
149 | | -│ │ ├── socket/ |
150 | | -│ │ ├── store/ |
151 | | -│ │ ├── types/ |
152 | | -│ │ ├── utils/ |
153 | | -│ │ ├── App.tsx |
154 | | -│ │ └── main.tsx |
| 134 | +├── project_management/ |
| 135 | +│ ├── backend/ |
| 136 | +│ │ ├── src/ |
| 137 | +│ │ │ ├── application/ # Use cases and interfaces |
| 138 | +│ │ │ ├── domain/ # Entities and domain logic |
| 139 | +│ │ │ ├── infrastructure/ # External services, DB schemas |
| 140 | +│ │ │ ├── presentation/ # Routes, Controllers, Middleware |
| 141 | +│ │ │ └── server.ts # App entry point |
| 142 | +│ │ └── package.json |
155 | 143 | │ │ |
156 | | -│ └── public/ |
157 | | -│ |
158 | | -└── README.md |
| 144 | +│ ├── frontend/ |
| 145 | +│ │ ├── src/ |
| 146 | +│ │ │ ├── components/ # Reusable UI components |
| 147 | +│ │ │ ├── pages/ # Application views |
| 148 | +│ │ │ ├── store/ # Redux setup and slices |
| 149 | +│ │ │ ├── hooks/ # Custom React hooks |
| 150 | +│ │ │ └── App.tsx # Root component |
| 151 | +│ │ └── package.json |
159 | 152 | ``` |
160 | 153 |
|
161 | 154 | --- |
162 | 155 |
|
163 | | -## 🚧 Project Status |
164 | | - |
165 | | -🚧 In active development |
| 156 | +## 📄 License |
166 | 157 |
|
167 | | -This project is being built step-by-step with a focus on **quality over speed** and real-world engineering practices. |
168 | | - |
169 | | ---- |
170 | | - |
171 | | -## 🎯 Why Projexa? |
172 | | - |
173 | | -Projexa is not just a demo project — it is a **portfolio-defining application** that demonstrates: |
174 | | - |
175 | | -* Real-world system design |
176 | | -* Clean Architecture in practice |
177 | | -* Scalable backend development |
178 | | -* Modern frontend patterns |
179 | | -* Production-ready thinking |
| 158 | +Distributed under the MIT License. See `LICENSE` for more information. |
180 | 159 |
|
181 | 160 | --- |
182 | 161 |
|
183 | 162 | ## 🤝 Contributing |
184 | 163 |
|
185 | | -Contributions are welcome! |
186 | | - |
187 | | -```bash |
188 | | -# Fork the repo |
189 | | -# Create your feature branch |
190 | | -git checkout -b feature/your-feature |
| 164 | +Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. |
191 | 165 |
|
192 | | -# Commit your changes |
193 | | -git commit -m "Add your feature" |
194 | | - |
195 | | -# Push to the branch |
196 | | -git push origin feature/your-feature |
197 | | -``` |
198 | | - |
199 | | ---- |
200 | | - |
201 | | -## 📜 License |
202 | | - |
203 | | -This project is licensed under the **MIT License**. |
| 166 | +1. Fork the Project |
| 167 | +2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) |
| 168 | +3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) |
| 169 | +4. Push to the Branch (`git push origin feature/AmazingFeature`) |
| 170 | +5. Open a Pull Request |
204 | 171 |
|
205 | 172 | --- |
206 | 173 |
|
207 | | -## 👤 Author |
208 | | - |
209 | | -**Haran** |
210 | | -🔗 GitHub: https://github.com/haranck |
211 | | - |
212 | | ---- |
213 | | - |
214 | | -## ⭐ Support |
215 | | - |
216 | | -If you like this project, consider giving it a ⭐ on GitHub! |
| 174 | +<div align="center"> |
| 175 | + <p>Built with ❤️ by the Projexa Team</p> |
| 176 | +</div> |
0 commit comments