WinstonLam / TimeItIn

This Hour Registration Web App is a comprehensive solution for businesses and freelancers to manage employee hours efficiently. Built using TypeScript and JavaScript, it features a user-friendly interface for creating employee profiles and registering their work hours.

TimeItIn 🕒

About 📖

This Hour Registration Web App is a comprehensive solution for businesses and freelancers to manage employee hours efficiently 🚀. Built with 💙 using TypeScript and JavaScript, it features a user-friendly interface for creating employee profiles and registering their work hours. This application consists of a front-end that communicates 🗣️ with a back-end server, both of which require setup.

Getting Started 🌟

Prerequisites 📋

• Node.js and npm (Node Package Manager) 📦
• Firebase account (for authentication and database services) 🔥

Setting Up the Front-End 🖥️

1. Clone the repository to your local machine. git clone

2. Navigate to the front-end directory and run npm install to install the required packages.

3. Configure Environment Variables: 🛠️

   • Create a .env file in the root of the front-end directory.
   • Add the following environment variables:

     REACT_APP_BACKEND_URL=<Your Backend URL>
     REACT_APP_FIREBASE_PRIVATE_KEY_ID=<Your Firebase Private Key ID>
     REACT_APP_FIREBASE_PROJECT_ID=<Your Firebase Project ID>
     

   • You need to replace the placeholders with your actual Firebase project details.

4. Firebase Setup: 🔒

   • Go to the Firebase Console and create a new project if you haven't already.
   • Navigate to your project settings to find your apiKey and projectId.
   • These details will be used in your .env file.

Example .env file for Front-End 📄

REACT_APP_BACKEND_URL=http://localhost:5000
REACT_APP_FIREBASE_PRIVATE_KEY_ID=xxx
REACT_APP_FIREBASE_PROJECT_ID=myapp-project-123

Setting Up the Back-End 💻

1. Navigate to the back-end directory and run npm install to install the dependencies.
2. Configure Environment Variables: 🛠️
   • Similar to the front-end, create a .env file in the root of your back-end directory.
   • Set up your Firebase database URL:

     FIREBASE_DATABASE_URL="https://<Your Firebase Database URL>"
     

3. Firebase Admin Setup: 🔐
   • In the Firebase Console, navigate to your project's settings, go to the "Service accounts" tab, and generate a new private key. Download this JSON file.
   • Rename the downloaded file to firebase-admin.json and place it in your back-end directory.

Example .env file for Back-End 📄

FIREBASE_DATABASE_URL="https://myapp-project-123-default-rtdb.europe-west1.firebasedatabase.app/"

Running the Application 🏃

• Front-End: Navigate to the front-end directory and run npm start. This will start the React application.
• Back-End: In a separate terminal, navigate to the back-end directory and run node server.js to start the server.

Contributing 🤝

Contributions are welcome! Please feel free to submit pull requests or open issues to discuss proposed changes or additions. Let's make TimeItIn better, together! ✨