Công nghệ:
Backend:
Node.js: Dựa vào việc có tệp server.js và thư mục api, có thể thấy backend được xây dựng bằng Node.js.
Express.js: Thư mục routes chứa các tệp như brands.js, collections.js, v.v., cho thấy Express.js có thể được sử dụng để xử lý routing.
Database Connection: Tệp conn.js trong thư mục db cho thấy có kết nối tới một cơ sở dữ liệu, nhưng không rõ là cơ sở dữ liệu nào.
Frontend:
React: Sự hiện diện của tệp App.js và thư mục components cho thấy dự án sử dụng React.
Redux: Thư mục redux cho thấy dự án sử dụng Redux để quản lý trạng thái.
Webpack: Tệp webpack.config.js cho thấy dự án sử dụng Webpack làm công cụ đóng gói mô-đun.
Babel: Tệp .babelrc cho thấy dự án sử dụng Babel để chuyển đổi mã JavaScript ES6/JSX thành mã tương thích với các trình duyệt cũ.
Chức năng:
Backend:
Quản lý các thực thể như brands, collections, menu, news, orders, product, và wishlist thông qua API.
Kết nối và truy vấn cơ sở dữ liệu.
Frontend:
Hiển thị thông tin sản phẩm, tin tức, và các bộ sưu tập thông qua các thành phần như Products, News, Collections.
Quản lý giỏ hàng và danh sách yêu thích với các thành phần cart và Wishlist.
Cung cấp giao diện người dùng cho việc duyệt menu và các trang văn hóa thông qua Menu và Culture.
Quản lý trạng thái giao diện người dùng và tương tác người dùng qua ui-context.js và Redux.
Gói web
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
HƯỚNG DẪN CÀI ĐẶT
Để cài đặt dự án này, bạn cần thực hiện các bước sau:
1. Cài đặt các phụ thuộc:
Backend:
Mở terminal và di chuyển đến thư mục backend:
Chạy lệnh sau để cài đặt các phụ thuộc cho backend:
Frontend:
Mở một terminal mới và di chuyển đến thư mục frontend:
Chạy lệnh sau để cài đặt các phụ thuộc cho frontend:
2. Cấu hình biến môi trường:
Tạo một tệp .env trong thư mục backend và frontend nếu cần thiết. Bạn có thể cần cung cấp các biến môi trường như cơ sở dữ liệu URI, API keys, v.v., tùy thuộc vào cấu hình và yêu cầu của dự án.
3. Chạy dự án:
Backend:
Trong thư mục backend, chạy lệnh sau để khởi động server backend:
Server backend sẽ chạy trên port được định cấu hình (thường là port 3001 hoặc 5000).
Frontend:
Trong thư mục frontend, chạy lệnh sau để khởi động ứng dụng React:
Một trang web sẽ tự động mở trên trình duyệt tại địa chỉ http://localhost:3000.
4. Xây dựng và triển khai:
Để xây dựng ứng dụng cho môi trường production, bạn có thể sử dụng lệnh sau trong thư mục frontend:
Sau đó, bạn có thể triển khai thư mục build tạo ra lên máy chủ hoặc dịch vụ hosting tùy chọn
cd backend/
npm install
cd frontend/
npm install
Nguồn: Topcode.vn
