candidate-test

The web challenge of a candidate's journey to greatness.

Overview

This is an Express.js application with full TypeScript support for both server-side and client-side code. The project uses Vite for client-side bundling and hot module replacement.

Project Structure

candidate-test/
├── src/
│   ├── server/            # Server-side TypeScript code
│   │   ├── tsconfig.json  # Server-side TypeScript config
│   │   ├── restaurants.ts # Server-side array of Restaurants (id & name)
│   │   ├── api.ts         # Server-side fetch functions and return type definitions
│   │   └── index.ts       # Express server entry point
│   └── client/            # Client-side TypeScript code
│       ├── tsconfig.json  # Client-side TypeScript config
│       ├── index.html     # Main HTML file
│       ├── styles.css     # CSS styles
│       └── main.ts        # Client-side TypeScript entry point
├── public/                # Built client-side files (generated by Vite)
├── dist/                  # Compiled server-side files (generated by TypeScript)
├── vite.config.ts         # Vite configuration
└── package.json           # Project dependencies and scripts

Features

• ✅ Express.js server serving static files and API routes
• ✅ Separate TypeScript configurations for server and client code
• ✅ Vite for fast client-side development and building
• ✅ Single command to start development environment
• ✅ Watch mode for both server and client TypeScript files
• ✅ Hot reloading for client-side changes
• ✅ Server restart on server-side changes

Getting Started

Installation

npm install

Development

Start the development environment with a single command:

npm run dev

This command will:

1. Start Vite in watch mode to build client-side TypeScript
2. Start the Express server with nodemon to watch server-side TypeScript
3. Both processes run concurrently and watch for file changes

The server will be available at http://localhost:3000

Building for Production

Build both client and server code:

npm run build

Running in Production

npm start

Scripts

• npm run dev - Start both client and server in development mode with watch
• npm run dev:client - Run only Vite build watcher for client code
• npm run dev:server - Run only server with nodemon
• npm run build - Build both client and server for production
• npm run build:client - Build only client code
• npm run build:server - Compile only server TypeScript
• npm start - Run the production server

Adding Routes

To add new API routes, edit src/server/index.ts:

app.get('/api/your-route', (req: Request, res: Response) => {
  res.json({ data: 'your data' });
});

Technology Stack

• Server: Express.js with TypeScript
• Client: Vanilla TypeScript with Vite
• Build Tools: Vite (client), TypeScript Compiler (server)
• Dev Tools: tsx, nodemon, concurrently