Campus ID is an innovative solution designed to streamline the processing of school ID card requests, offering an efficient and quick experience. This system simplifies the traditionally lengthy process, empowering students to enter their details, make payments, and promptly receive their new ID cards.
- Frontend: React, TypeScript, Tailwind CSS
- Backend: Node.js, Express
- Database: MySQL
- Authentication and User Management: Clerk
-
Clone the Repository:
git clone https://github.com/muhammadui/IDCard-request.git
Navigate to the project directory:
cd IDCard-request
-
Configure and Run the Backend:
Navigate to the server directory and set up the backend:
cd server
Run the following command to install the project dependencies:
npm install
Create a
.env
file in theserver
directory with the following variables:PORT=3001 DATABASE_URL=mysql://username:password@localhost:3306/campus_id ALLOWED_ORIGINS=https://id-card-request.vercel.app/
Adjust the values according to your setup, then run the backend:
npm start
The backend server will run on http://localhost:3001.
-
Set Up MySQL Database:
-
Create a MySQL database named
campus_id
. -
Execute the SQL script provided in the
db-scripts
directory:mysql -u username -p campus_id < db-scripts/init.sql
-
-
Update CORS Rules:
In your backend code, set up CORS rules to allow connections from your frontend. For example, using Express and the
cors
middleware:const cors = require("cors"); app.use( cors({ origin: process.env.ALLOWED_ORIGINS.split(","), }) );
Ensure the
ALLOWED_ORIGINS
environment variable matches your frontend's address. -
Configure and Run the Frontend:
Navigate to the client directory to configure and run the frontend:
cd client
Run the following command to install the project dependencies:
npm install
Ensure you have Node 18.x installed on your machine.
-
Navigate to the Project Directory:
cd client
This will take you to the project directory.
-
Install Dependencies:
Run the following command to install the project dependencies.
npm install
-
Start the Development Server:
To start the development server and run the React Vite app, use the following command:
npm run dev
This will start the development server, and you should see output on your terminal indicating that the app is running.
-
Access the App:
Open your web browser and navigate to http://localhost:5173 to view your app.
You can use the following additional commands for various tasks:
-
Build for Production:
npm run build
This command creates an optimized production build of your app.
-
Serve the Production Build Locally:
npm run serve
This command serves the production build locally to test it before deployment.
-
Access the Web App:
- Open your browser and go to http://localhost:5173.
-
Enter Student Details:
- Fill in the required information in the provided form.
-
Make Payment:
- Follow the prompts to complete the payment process securely.
-
Receive ID Card:
- Upon successful payment, expect to be notified or receive a call within the next 15 minutes to collect your new ID card.
Explore the live preview of the application: Campus ID Live Preview
We welcome contributions to enhance Campus ID! Please follow these guidelines:
- Fork the repository and create your branch:
git checkout -b feature/your-feature
. - Commit your changes:
git commit -m 'Add your feature'
. - Push to the branch:
git push origin feature/your-feature
. - Submit a pull request.
This project is licensed under the MIT License - see the LICENSE.md file for details.