A Slack-inspired messaging app that allows users to register, log in, create channels, and communicate via direct and channel messages. Built with React, Vite, Chakra UI, and modern web technologies.
🔒 Supports authentication, messaging, and real-time channel collaboration.
- ✅ User Registration and Login (Email + Password)
- 💬 Direct Messaging between users
- 🧵 Channel-based group messaging
- ➕ Create new channels
- 👥 Add users to channels
- 📥 Real-time message receiving (DMs + Channels)
| Layer | Tech |
|---|---|
| Frontend | React + Vite |
| UI Framework | Chakra UI + Framer Motion |
| HTTP Client | Axios |
| Routing | React Router DOM |
| Forms & UX | React Select, Toastify |
| State Mgmt | React Context / Hooks |
| Date Utils | date-fns |
- Clone the repo
git clone https://github.com/jamillessn/slack-app.git cd slack-app - Install dependencies
npm install
- Start development server
npm run dev
| Command | Description |
|---|---|
npm run dev |
Run development server |
npm run build |
Create production build |
npm run test |
Run unit tests (Vitest) |
npm run lint |
Check linting errors |
npm run preview |
Preview production build |
This app connects to a Slack-style backend that handles:
- Authentication (register, login)
- User and channel management
- Message creation and retrieval
src/
├── assets/ # Media (logos and gifs)
├── components/ # Reusable components
├── pages/ # Route views (Login, Register, Main page)
├── utils/ # Helper functions
├── App.jsx # App entrypoint
├── main.jsx # Routes
public/
vite.config.js # Vite configUsers are authenticated via email/password and issued a session token. The app manages session state and redirects based on login status.
-Users can create new channels and invite other users -Channel messages appear in thread view -Users can send and receive DMs -All messages are fetched from the backend via API calls
Project under Avion School / portfolio showcase. Built by @jamillessn.