Steps to Check Node Version and Install the Latest Version
-
Open the command prompt and run the following command:
node -v
This command will display the installed version of Node.js. -
If the displayed version is lower than 18, go to https://nodejs.org/en (opens in a new tab) in your web browser.
-
Download the recommended version of Node.js and run the installer. The installer will guide you through the installation process and install all the necessary dependencies.
-
After the installation is complete, open the command prompt again and run the following command:
node -v
This time, you should see the latest installed version of Node.js.
Steps to Run the Project
-
Clone the repository 'mtd-web-v2' to your local machine.
-
Open the project folder 'mtd-web-v2' in Visual Studio Code (VS Code) or any other preferred code editor.
-
Open the terminal within your current project directory ('mtd-web-v2').
-
Run the following command in the terminal to install the project dependencies:
npm install
This command will use Node Package Manager (npm) to install all the required dependencies specified in the project. -
Create a file named
.env.local
in the project's root folder and paste the following code into it, This file is used to set environment variables for the project.NEXT_PUBLIC_API_BASE_URL=https://api.managetheday.com NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_URL_INTERNAL=http://localhost:3000 NEXTAUTH_SECRET=somesecret NEXT_PUBLIC_GOOGLE_CLIENT_ID=132875126157-ibn1b1qujifjtovb4ghe68aph620l0mu.apps.googleusercontent.com GOOGLE_CLIENT_SECRET=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
-
Finally, run the following command in the terminal to start the project:
npm run dev
This command will build and run the project. Once it's running, you can access it in your web browser at http://localhost:3000. -
For production the
.env.productions
file isNEXT_PUBLIC_API_BASE_URL=https://api.managetheday.com NEXTAUTH_URL=https://beta.managetheday.com NEXTAUTH_SECRET=somesecret NEXT_PUBLIC_GOOGLE_CLIENT_ID=132875126157-ibn1b1qujifjtovb4ghe68aph620l0mu.apps.googleusercontent.com GOOGLE_CLIENT_SECRET=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 NEXTAUTH_URL_INTERNAL=https://beta.managetheday.com
Developer Guide
Code Folder Structure
The codebase is divided into the following folders:
-
.vscode: This folder contains all the VS Code related configuration files.
-
.vscode/snippets: This folder contains all the VS Code snippets for the project. Ui related snippets are stored in ui.code-snippets file and api related snippets are stored in api.code-snippets file.
-
.vscode/settings.json: This file contains all the VS Code settings for the project.
-
.vscode/extensions.json: This file contains all the VS Code extensions for the project.
-
docs: This folder contains all the documentation for the project. Developer guide, contributing guide, etc.
-
public: This folder contains all the public assets for the project. This is where all the static assets are stored. These assets are accessible from the root of the project and exposed to the public.
-
src: This folder contains all the source code for the project.
-
src/api: This folder contains server-side code for the project. This is where all the API related code is written. This is not the REST API code. This is the code that is used to fetch static data from the server.
-
src/app: This folder contains all the application related code. This is where all the application logic is written.
-
src/app/(pages): This folder contains all the application pages. This is where all the application routes are defined.
-
src/app/(pages)/(auth): This folder contains all the authentication related pages. For example, login, signup, forgot password, etc. These are accessible from the root of the project and are exposed to the public.
-
src/app/(pages)/(marketing): This folder contains all the marketing related pages. For example, home, pricing, etc. These are accessible from the root of the project and are exposed to the public.
-
src/app/(pages)/(private): This folder contains all the private pages. For example, dashboard, settings, etc. These are accessible from the root of the project and are not exposed to the public. A user must be logged in to access these pages.
-
src/app/components: This folder contains all the reusable components built by us for the project.
-
src/app/containers: This folder contains all the containers for the project. These containers are used to wrap the components and provide them with the required data.
-
src/assets: This folder contains all the static assets for the project. These assets are not accessible from the root of the project and not exposed to the public. These assets are used internally by the application.
-
src/components: This folder contains all the reusable components for the project that were shipped with the project. These components are organized by their type and purpose. Our custom components are defined in the
src/app/components
directory.