Step 1: Create the Project Folders
π― Target Folder Structure
C:\Projects\my-notes-app> tree
Folder PATH listing
Volume serial number is ABCD-1234
C:.
ββββbackend
ββββfrontend
Folder PATH listing
Volume serial number is ABCD-1234
C:.
ββββbackend
ββββfrontend
π₯οΈ App Phase Preview
user@egotech:~$ mkdir my-notes-app
user@egotech:~$ cd my-notes-app
user@egotech:~/my-notes-app$ mkdir backend frontend
# Project scaffolding complete.
# Ready for module 2.
π
1.1 Create the Root Directory
Open your terminal and run the following commands to create the main folder and navigate inside it:
Terminal
mkdir my-notes-app
cd my-notes-appπ
1.2 Create Frontend and Backend Folders
Inside my-notes-app, create two sub-folders:
Terminal
mkdir backend frontendπ©
1.3 Initialize the Backend
Navigate into the backend folder and initialize a standard Node.js project. The -y flag skips the questionnaire.
Terminal
cd backend
npm init -yβοΈ
1.4 Initialize the Frontend
Navigate to the frontend folder and use Vite to scaffold a new React application.
Terminal
cd ../frontend
npm create vite@latest . -- --template react
npm installπ»
1.5 Open in Visual Studio Code
Now that your folders are ready, make sure you are in the root my-notes-app folder. Use the command below to open the entire project workspace directly in VS Code.
Terminal
cd ../
code .
Note: The
code . command tells your computer to open the current folder (represented by the dot .) in VS Code.