BasicServerSetup: A Time Tracking Application

BasicServerSetup is a time tracking application I built to work through backend and frontend integration, API design, and deployment. The idea was simple: let users register, log in, clock in, clock out, and review their timesheet. I kept it lightweight but structured it in a way that shows how a real app would be built.

Features

• User authentication with registration and login
• Clock in and clock out functionality
• Timesheet view to review work sessions
• Frontend built with HTML and Tailwind CSS
• Backend built with Node.js and Express.js
• CORS enabled for frontend-backend communication
• In-memory data store for the demo, easy to swap with a real database later

Tech Stack

• Backend: Node.js, Express.js
• Frontend: HTML, Tailwind CSS
• Tools: Nodemon for development, http-server for frontend, GitHub Pages for hosting

I used Heroku for the backend API and GitHub Pages with a custom domain for the frontend. That made the deployment easy to test and share.

Prerequisites and Setup

• Node.js and npm
• (Optional) Git for cloning the repo

Steps:

1. Clone the repo
   git clone https://github.com/BradleyMatera/BasicServerSetup.git
2. Go into the project folder
   cd BasicServerSetup
3. Install backend dependencies
   npm install
4. Add a .env file in the root with:
   PORT=3000

Running the Backend

• Development with Nodemon: npm run dev
• Production: npm start
• Runs on http://localhost:3000

Running the Frontend

Option 1: with http-server

• Install: npm install -g http-server
• Go into frontend/ and run http-server -c-1
• Open http://localhost:8080

Option 2: with VS Code Live Server

• Install the extension
• Open frontend/index.html and choose “Open with Live Server”

Project Structure

BasicServerSetup/
├── .env
├── package.json
├── app/
│   ├── app.js
│   ├── models/
│   │   ├── userModel.js
│   │   └── timeEntryModel.js
│   ├── controllers/
│   │   ├── userController.js
│   │   └── timeController.js
│   ├── routes/
│   │   └── index.js
│   └── utils/
│       └── authMiddleware.js
└── frontend/
    └── index.html

The backend handles auth, clock in/out, and timesheet logic. The frontend is a simple HTML + Tailwind setup that makes requests to the API.

API Endpoints

• Register: POST /register with { "username": "your_username", "password": "your_password" }
• Login: POST /login with { "username": "your_username", "password": "your_password" }
• Clock In: POST /clockin with x-user-id header
• Clock Out: POST /clockout with x-user-id header
• View Timesheet: GET /timesheet with x-user-id header

Base URL when running locally: http://localhost:3000

Frontend Usage

1. Open the frontend in your browser
2. Register a new user
3. Log in with that user
4. Use the Clock In and Clock Out buttons
5. View the timesheet to see entries
6. Logout when done

Future Improvements

• Replace in-memory storage with MongoDB
• Use JWT for authentication
• Add input validation and better error handling
• Improve mobile design
• Add unit tests
• Possibly rebuild the frontend with React or Next.js

Lessons Learned

• Keep the backend and frontend separated but connected cleanly
• Use simple deployments (Heroku + GitHub Pages) to focus on the code
• Even a small project benefits from organization and documentation
• Building out API endpoints and testing them early saves time

Connect

Repo is available on GitHub. I’m open to feedback or collaboration.

• GitHub Repo
• LinkedIn

Bradley Matera