Tổng quan
x2mint
│ README.md
├───.vscode
│ settings.json
└───clients
│ .eslintignore
│ .eslintrc.json
│ .gitignore
│ jsconfig.json
│ package.json
│ README.md
│ yarn.lock
├───public
│ │ favicon.ico
│ │ index.html
│ │ manifest.json
│ │ robots.txt
│ └───assets
│ ├───avatars
│ ├───backgrounds
│ ├───icons
│ ├───images
│ └───samples
└───src
│ App.js
│ App.scss
│ index.css
│ index.js
│ reportWebVitals.js
├───actions
│ └───api
├───app
├───components
│ ├───account
│ │ ├───handlePassword
│ │ ├───login
│ │ ├───profile
│ │ └───register
│ ├───admin
│ │ ├───AppContent
│ │ │ ├───Account
│ │ │ │ ├───AccountGrantPermissions
│ │ │ │ ├───AccountManagement
│ │ │ │ └───AccountStatistics
│ │ │ ├───Contest
│ │ │ │ ├───ContestArchive
│ │ │ │ ├───ContestParticipants
│ │ │ │ └───ContestStatistics
│ │ │ ├───Dashboard
│ │ │ └───Revenue
│ │ ├───AppNavbar
│ │ └───AppSidebar
│ ├───common
│ │ ├───appNavbar
│ │ ├───browseLibrary
│ │ ├───confirmModal
│ │ ├───myImage
│ │ └───share
│ ├───contest
│ │ ├───contestInfo
│ │ ├───modalCreateContest
│ │ └───statistics
│ ├───exam
│ │ ├───answer
│ │ ├───panelPreview
│ │ ├───panelQuestionPicker
│ │ ├───panelSettings
│ │ ├───question
│ │ └───submitResult
│ ├───payments
│ └───statistics
├───pages
│ └───home
├───reducers
├───redux
└───utils
Chi tiết
x2mint
│ README.md
├───.vscode
│ settings.json
└───clients
│ .eslintignore
│ .eslintrc.json
│ .gitignore
│ jsconfig.json
│ package.json
│ README.md
│ yarn.lock
├───public
│ │ favicon.ico
│ │ index.html
│ │ manifest.json
│ │ robots.txt
│ └───assets
│ ├───avatars
│ ├───backgrounds
│ ├───icons
│ ├───images
│ └───samples
│ sample_test.xlsx
└───src
│ App.js
│ App.scss
│ index.css
│ index.js
│ logo.svg
│ reportWebVitals.js
│ _setting.scss
├───actions
│ │ initialData.js
│ │ useAxios.js
│ └───api
│ AnswerAPI.js
│ AuthAPI.js
│ BillAPI.js
│ ContestAPI.js
│ QuestionAPI.js
│ StatisticsAPI.js
│ TakeTestAPI.js
│ TestAPI.js
│ UserAPI.js
│ VNPayAPI.js
├───app
│ store.js
├───components
│ │ ProtectedRoute.js
│ ├───account
│ │ ├───handlePassword
│ │ │ ChangePassword.js
│ │ │ ForgotPassword.js
│ │ │ ForgotPassword.scss
│ │ │ ResetPassword.js
│ │ │ ResetPassword.scss
│ │ ├───login
│ │ │ Login.js
│ │ │ Login.scss
│ │ ├───profile
│ │ │ ModalUpdateUserInfo.js
│ │ │ Profile.js
│ │ │ Profile.scss
│ │ │ UserTakeTest.js
│ │ └───register
│ │ ActivationEmail.js
│ │ Register.js
│ │ Register.scss
│ ├───admin
│ │ │ Admin.js
│ │ │ Admin.scss
│ │ ├───AppContent
│ │ │ │ AppContent.js
│ │ │ ├───Account
│ │ │ │ │ data.js
│ │ │ │ ├───AccountGrantPermissions
│ │ │ │ │ AccountGrantPermissions.js
│ │ │ │ │ AccountGrantPermissions.scss
│ │ │ │ ├───AccountManagement
│ │ │ │ │ AccountManagement.js
│ │ │ │ │ AccountManagement.scss
│ │ │ │ └───AccountStatistics
│ │ │ │ AccountStatistics.js
│ │ │ │ AccountStatistics.scss
│ │ │ ├───Contest
│ │ │ │ │ data.js
│ │ │ │ ├───ContestArchive
│ │ │ │ │ ContestArchived.js
│ │ │ │ │ ContestArchived.scss
│ │ │ │ ├───ContestParticipants
│ │ │ │ │ ContestParticipants.js
│ │ │ │ │ ContestParticipants.scss
│ │ │ │ └───ContestStatistics
│ │ │ │ ContestStatistics.js
│ │ │ ├───Dashboard
│ │ │ │ Dashboard.js
│ │ │ │ Dashboard.scss
│ │ │ └───Revenue
│ │ │ data.js
│ │ │ Revenue.js
│ │ ├───AppNavbar
│ │ │ AppNavbar.js
│ │ │ AppNavbar.scss
│ │ └───AppSidebar
│ │ AppSidebar.js
│ │ AppSidebar.scss
│ ├───common
│ │ ├───appNavbar
│ │ │ AppNavbar.js
│ │ │ AppNavbar.scss
│ │ ├───browseLibrary
│ │ │ BrowseLibrary.js
│ │ │ BrowseLibrary.scss
│ │ ├───confirmModal
│ │ │ ConfirmModal.js
│ │ │ ConfirmModal.scss
│ │ ├───myImage
│ │ │ MyImage.js
│ │ │ MyImage.scss
│ │ └───share
│ │ Share.js
│ │ Share.scss
│ ├───contest
│ │ │ Contest.js
│ │ │ Contest.scss
│ │ ├───contestInfo
│ │ │ ContestInfo.js
│ │ │ ContestInfo.scss
│ │ ├───modalCreateContest
│ │ │ ModalCreateContest.js
│ │ │ ModalCreateContest.scss
│ │ └───statistics
│ │ StatisticContest.js
│ │ StatisticTest.js
│ │ StatisticTest.scss
│ ├───exam
│ │ │ MultiChoices.js
│ │ │ MultiChoices.scss
│ │ ├───answer
│ │ │ Answer.js
│ │ │ Answer.scss
│ │ ├───panelPreview
│ │ │ PanelPreview.js
│ │ │ PanelPreview.scss
│ │ ├───panelQuestionPicker
│ │ │ PanelQuestionPicker.js
│ │ │ PanelQuestionPicker.scss
│ │ ├───panelSettings
│ │ │ ModalTestInfo.js
│ │ │ PanelSettings.js
│ │ │ PanelSettings.scss
│ │ ├───question
│ │ │ Question.js
│ │ │ Question.scss
│ │ └───submitResult
│ │ data.js
│ │ SubmitResult.js
│ │ SubmitResult.scss
│ ├───payments
│ │ PaymentReturn.js
│ │ PaymentReturn.scss
│ │ Payments.js
│ └───statistics
│ ContestStatistics.js
│ TakeTestStatistics.js
├───pages
│ │ Page404.js
│ │ Page500.js
│ └───home
│ About.js
│ Contact.js
│ Footer.js
│ Homepage.js
│ Homepage.scss
│ MainBanner.js
├───reducers
│ authReducer.js
├───redux
│ authSlice.js
└───utils
colors.js
constants.js
dragDrop.js
EventListener.js
ExportToExcel.js
ImportTestData.js
setAuthToken.js
sorts.js
timeUtils.js
Validation.js
- Bước 1: Clone project
git clone https://github.com/TienNHM/x2mint.git- Bước 2: Install
npm installHoặc:
yarn install- Bước 3: Thêm file
.envchứa thông tin các biến môi trường
Chuyển đến thư mục /clients, tạo mới file .env chứa thông tin các biến môi trường:
| Tên biến | Mô tả |
|---|---|
| CI | Bắt buộc là False, dùng để deploy trên vercel.com. |
| REACT_APP_WEBSITE | Domain nơi deploy website, VD: https://x2mint.vercel.app. |
| REACT_APP_API_ROOT | Root endpoint gọi API, VD: http://api-x2mint.herokuapp.com/app/api/v1. |
| REACT_APP_PEXELS_ID | Pexels ID, đăng ký và tạo mới tài khoản tại đây, sau đó tạo mới API key. |
| REACT_APP_FB_APP_ID | Facebook App ID, đăng ký vào tạo một ứng dụng trên Facebook tại đây. Sau khi tạo thành công, có thể copy ID tại trang Dashboard của ứng dụng. |
| REACT_APP_GOOGLE_CLIENT_ID | Google Client ID, đăng ký vào tạo mới project. Xem hướng dẫn chi tiết tại đây. |
- Bước 4: Khởi chạy
Tại thư mục x2mint, mở terminal và chạy các lệnh sau:
cd clients
npm run startHoặc:
cd clients
yarn startKết quả:
Compiled successfully!
You can now view clients in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.56.1:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
Try cập vào http://localhost:3000 để xem trang web.
- Bước 1: Tạo tài khoản trên https://vercel.com/, chọn phương thức đăng nhập với tài khoản
Github. - Bước 2: Import project từ
Githubrepo, xem hướng dẫn chi tiết tại đây - Bước 3: Cấu hình cho ứng dụng:
- Project Name: Tên ứng dụng (tuy chọn).
- Framework Preset: Chon
Create React App. - Root Directory: Chọn
clients. - Environment Variables: Thêm tất cả các biến môi trường chứa trong file
.env(nằm trong thư mụcclients).
- Bước 4: Bấm
Deployvà chờ đợi ứng dụng deploy thành công. - Bước 5: Sau khi deploy thành công, chuyển tới phần
Settingscủa ứng dụng. Tại đây, thay đổi lại domain của ứng dụng tại mụcDomain. Lưu ý: domain này phải tương tự như giá trị lưu tại biến môi trườngREACT_APP_WEBSITE. - Bước 6: Truy cập domain ứng dụng (VD: http://x2mint.vercel.app) để xem ứng dụng.
