Đây là source code website Fullstack được xây dựng bằng ReactJS, NodeJS, ExpressJS và MongoDB. Dự án phù hợp cho sinh viên làm đồ án, học tập lập trình web fullstack hoặc dùng làm nền tảng để phát triển thêm.
Các chức năng chính:
- Giao diện frontend hiện đại, dễ chỉnh sửa
- Responsive trên máy tính và điện thoại
- Đăng ký tài khoản
- Đăng nhập tài khoản
- Kết nối API giữa frontend và backend
- Lưu trữ dữ liệu bằng MongoDB
- Cấu trúc thư mục rõ ràng, dễ bảo trì
- Có file cấu hình môi trường mẫu
- Có thể chạy local trên máy cá nhân
- Có thể deploy frontend lên GitHub Pages và backend lên Render
Công nghệ sử dụng:
Frontend:
- ReactJS
- Vite
- JavaScript
- CSS
- Axios
- React Router
Backend:
- NodeJS
- ExpressJS
- MongoDB
- Mongoose
- JWT Authentication
- dotenv
- bcryptjs
Database:
- MongoDB Local hoặc MongoDB Atlas
Dự án bao gồm:
- Source code frontend
- Source code backend
- File package.json cho frontend và backend
- File .env.example
- Hướng dẫn cài đặt chi tiết
- Dữ liệu mẫu nếu có
- Ảnh minh họa giao diện
Lưu ý:
Sau khi tải source code, người dùng cần cài NodeJS, MongoDB hoặc tạo MongoDB Atlas, sau đó cấu hình file .env theo hướng dẫn để chạy dự án.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
HƯỚNG DẪN CÀI ĐẶT DỰ ÁN
Yêu cầu trước khi cài:
- Cài NodeJS
- Cài MongoDB Compass hoặc sử dụng MongoDB Atlas
- Cài Visual Studio Code
- Cài Git nếu cần
Bước 1: Giải nén source code
Sau khi tải về, giải nén file source code ra thư mục mong muốn.
Bước 2: Cài backend
Mở terminal tại thư mục backend và chạy:
npm install
Sau đó tạo file .env dựa theo file .env.example.
Ví dụ:
PORT=5000
MONGODB_URI=mongodb://127.0.0.1:27017/ten_database
JWT_SECRET=your_secret_key
CLIENT_URL=http://localhost:5173
Sau đó chạy backend:
npm start
Hoặc:
npm run dev
Backend sẽ chạy ở:
http://localhost:5000
Bước 3: Cài frontend
Mở terminal tại thư mục frontend và chạy:
npm install
Sau đó chạy frontend:
npm run dev
Frontend sẽ chạy ở:
http://localhost:5173
Bước 4: Kết nối database
Nếu dùng MongoDB Local:
MONGODB_URI=mongodb://127.0.0.1:27017/ten_database
Nếu dùng MongoDB Atlas:
Bước 5: Import dữ liệu mẫu nếu có
Nếu source code có thư mục data hoặc file seed, chạy lệnh theo hướng dẫn trong README.
Ví dụ:
npm run seed
Hoặc import thủ công bằng MongoDB Compass.
Bước 6: Kiểm tra website
Mở trình duyệt và truy cập:
http://localhost:5173
Nếu frontend gọi API thành công, dự án đã chạy đúng.