📹 MERN Screen Recorder

This is my assignment project. I developed a Screen Recorder App using React (Frontend) and Node.js + Express + SQLite (Backend).

It allows users to:

Record their screen (max 3 minutes).

Preview the recorded video before saving.

Upload recordings to the backend.

View the list of uploaded recordings.

Download and play recordings anytime.

🚀 Tech Stack

Frontend: React (CRA), CSS

Backend: Node.js, Express

Database: SQLite (for storing recordings metadata)

Storage: Filesystem (recordings saved in uploads/)

🛠️ Features

✅ Record screen (with timer up to 3 mins) ✅ Stop / Reset / Preview before uploading ✅ Save recording to backend ✅ View list of uploaded recordings ✅ Download and play videos

📂 Project Structure mern-screen-recorder/ │── backend/ # Express + SQLite API │ ├── server.js # Backend server code │ ├── db.js # Database setup │ └── uploads/ # Uploaded recordings │ │── frontend/ # React app │ ├── src/ │ │ ├── App.js │ │ ├── App.css │ │ └── index.js │ └── package.json

⚡ How to Run 1️⃣ Backend cd backend npm install node server.js

Runs on: http://localhost:5000

2️⃣ Frontend cd frontend npm install npm start

Runs on: http://localhost:3000

📸 Screenshots (Optional for Submission)

👉 You can add some screenshots here (Recording UI, Uploaded List).

📌 Notes (My Point of View)

I focused on building the main features clearly instead of adding extra styling.

The project is fully working with screen recording, saving, and fetching uploaded videos.

I used SQLite so it is lightweight and easy to run.

✅ Conclusion

This project shows my ability to:

Work with React (hooks, state, props).

Build a Node.js + Express API.

Connect frontend with backend.

Implement file uploads and database integration