Welcome to the Muzz Frontend Engineering Test! This is a chat application built with modern web technologies, simulating a real-world codebase. We've provided a starting point with both frontend and backend implementations to help you get started quickly.
Your task is to take ownership of this project, refactor and improve the code, fix issues, and implement new features — just like a lead engineer would when inheriting an existing app.
Most of your time will be spent working in the frontend/src/pages/chat
directory, which contains the core chat functionality of the application. This includes the chat interface, message handling, and user interactions.
- Node.js (v18+ recommended)
- npm (v9+)
-
Clone the repository
git clone git@github.com:muzzapp/web-lead-tech-test.git cd muzz-exercise
-
Install dependencies
# Install frontend dependencies cd frontend npm install # Install backend dependencies cd ../backend npm install cd ..
-
Start the development servers
# Start backend server (from backend directory) cd backend npm run dev # Start frontend server (from frontend directory) cd frontend npm run dev
.
├── frontend/ # Frontend application
│ ├── src/
│ │ ├── assets/ # Static assets like images and hardcoded api
│ │ ├── components/ # Reusable UI components
│ │ │ ├── button/
│ │ │ ├── container/
│ │ │ ├── tabs/
│ │ │ └── user-card/
│ │ ├── pages/ # Page components
│ │ │ ├── chat/ # Chat functionality
│ │ │ │ ├── _components/ # Chat-specific components
│ │ │ │ │ ├── chat-tab/ # Main chat interface
│ │ │ │ │ │ └── _components/
│ │ │ │ │ │ └── message/ # Message components
│ │ │ │ │ ├── header/ # Chat header
│ │ │ │ │ ├── profile-tab/ # User profile - Changes not needed
│ │ │ │ │ └── tabs/ # Chat navigation
│ │ │ │ └── Chat.tsx # Main chat page
│ │ │ └── home/ # Home page with user selection
│ │ ├── store/ # State management
│ │ │ ├── messages.store.ts # Message state
│ │ │ ├── page.store.ts # Page navigation state
│ │ │ └── user.store.ts # User state
│ │ └── App.tsx # Root component
│ └── package.json
│
└── backend/ # Backend application
├── src/
│ ├── controllers/ # Request handlers
│ ├── models/ # Data models
│ ├── routes/ # API routes
│ └── server.ts # Server entry point
└── package.json
We've included a basic backend starter to save you time, but feel free to:
- Use your own backend implementation
- Modify the existing backend
- Use a different technology stack
- Implement any additional features
The current backend is a simple Express.js server with basic user and message endpoints. You can find it in the backend
directory.
-
frontend/src/pages/chat
: Contains the main chat functionality_components/chat-tab
: Handles message display and input_components/message
: Individual message components_components/header
: Chat header with navigation_components/profile-tab
: User profile information
-
frontend/src/store
: State managementmessages.store.ts
: Manages chat messagesuser.store.ts
: Handles user data and authenticationpage.store.ts
: Controls page navigation
-
frontend/src/components
: Reusable UI componentsbutton
: Custom button componentcontainer
: Page containertabs
: Navigation tabsuser-card
: User display component