Deployment of Our Notes App

By now, you’ve built a fully functional Notes App in React using Vite. Your app allows users to add, edit, pin, delete, and search notes. It also supports drag-and-drop reordering, note colors, and even the ability to export and import notes as JSON files. You styled the app with a clean dark-themed UI using App.css and added a helpful instructions modal to guide users.

The final step is to deploy your project online so you can share it with others. In this module, we’ll cover pushing your project to GitHub, deploying with Netlify, and reviewing the overall project structure.

1) Pushing Your App to GitHub

Before deployment, it’s best to back up your code in an online repository. GitHub is the most popular option.

Step 1: Initialize Git
Open a terminal in your project’s root folder (where package.json is located) and run:

git init

git add .

git commit -m "Initial commit"

Step 2: Create a GitHub Repository

1. Go to GitHub and log in.
2. Click the + icon → New repository.
3. Name it something like react-notes-app.
4. Keep it empty (don’t add README, .gitignore, or license).
5. Click Create repository.

Step 3: Push Your Project
Back in your terminal, connect your local project to GitHub:

git branch -M main

git remote add origin https://github.com/your-username/react-notes-app.git

git push -u origin main

If this is your first time using Git, configure your details:

git config --global user.name "Your Name"

git config --global user.email "[email protected]"

Your project code will now be live on GitHub.

2) Deploying to Netlify

With your repository ready, you can now deploy your Notes App so it’s accessible with a shareable link.

Step 1: Build the Project
Run the following command to create an optimized production build:

npm run build

This generates a dist/ folder, which contains the ready-to-deploy version of your app.

Step 2: Set Up Netlify

1. Go to Netlify and sign up or log in.
2. From your dashboard, click Add New Site → Import an Existing Project.

Step 3: Connect GitHub

1. Authorize Netlify to access your GitHub repositories.
2. Select the react-notes-app repository.

Step 4: Configure Build Settings
Use the following settings:

• Build Command: npm run build
• Publish Directory: dist

Click Deploy Site. After a short wait, Netlify will give you a live link like:

https://my-notes-app.netlify.app/

You can rename this link in Site Settings → Change Site Name.

Your Notes App is now deployed and can be shared with others.

3) Reviewing the Project Structure

Before wrapping up, let’s quickly review the key files and their roles in your project:

• App.jsx: The main component. Handles note creation, editing, deletion, pinning, searching, drag-and-drop reordering, export/import features, and displaying instructions.
• App.css: Custom styles for the entire app, including layout, colors, animations, modal design, and note card styling.
• main.jsx: The entry point that mounts the App component into the DOM.
• index.html: The HTML template that Vite uses to load your React app.

dist/: Generated after running npm run build. This is what Netlify uses to serve your live app.