Topics

Creating a Simple Note Taking App with React and Cloudzilla

Let’s walk through building a basic note-taking application that you can actually use. We’ll create something straightforward where you can write down notes and see them all in one place. I’ll guide you through each step with explanations on building a React application that you can easily deploy to Cloudzilla.

Getting Your Tools Ready

Before we start coding, you’ll need a few tools on your computer. You’ll need Node.js, which includes npm (Node Package Manager) to help us create and manage our React application. You can download it from nodejs.org.
You’ll also want Git, which is a way to track changes in your code. Think of it like a super-powered “save” button that remembers everything you’ve done. You can get Git from git-scm.com.
For storing your code online, a GitHub account will be helpful. It’s like a cloud storage specifically for code where others can see your work. Sign up at github.com if you don’t have an account yet.
Finally, you’ll need a Cloudzilla account to put your app online so you can access it from anywhere. Just register at cloudzilla.ai.

Setting Up Your React Project

We’ll create a new React application that will handle both displaying our notes and storing them. Since we’re keeping things simple, we’ll use the browser’s localStorage API to save our notes directly in the browser.
First, open your terminal or command prompt. Create a new React application called “note_taking_app” by typing:

npx create-react-app note_taking_app
cd note_taking_app

This creates a basic React app and moves into its directory. The create-react-app tool sets up everything we need to start developing.

Building the Note-Taking App

Now let’s modify our React app to create our note-taking functionality. Open the src/App.js file and replace everything with this code:

import { useState, useEffect } from 'react';
import './App.css';

function App() {
const [notes, setNotes] = useState([]);
const [newNote, setNewNote] = useState('');

// Load notes from localStorage when the app loads
useEffect(() => {
const savedNotes = localStorage.getItem('notes');
if (savedNotes) {
setNotes(JSON.parse(savedNotes));
}
}, []);

// Save notes to localStorage whenever they change
useEffect(() => {
localStorage.setItem('notes', JSON.stringify(notes));
}, [notes]);

// Add a new note
const handleSubmit = (e) => {
e.preventDefault();
if (!newNote.trim()) return;

const addedNote = {
id: Date.now(),
content: newNote,
};

setNotes([...notes, addedNote]);
setNewNote('');
};

// Delete a note
const deleteNote = (id) => {
setNotes(notes.filter(note => note.id !== id));
};

return (
<div className="App">
<header className="App-header">
<h1>My Notes</h1>
</header>
<main>
<form onSubmit={handleSubmit} className="note-form">
<textarea
value={newNote}
onChange={(e) => setNewNote(e.target.value)}
placeholder="Type a note..."
className="note-input"
/>
<button type="submit" className="add-button">Add Note</button>
</form>

<div className="notes-container">
{notes.length === 0 ? (
<p className="no-notes">No notes yet. Add one above!</p>
) : (
notes.map((note) => (
<div key={note.id} className="note-card">
<p>{note.content}</p>
<button 
onClick={() => deleteNote(note.id)}
className="delete-button"
>
Delete
</button>
</div>
))
)}
</div>
</main>
</div>
);
}

export default App;

Let’s break down what this code does:

We use useState to create two pieces of data: “notes” (an array of all our notes) and “newNote” (whatever the user is currently typing).
We use useEffect to load saved notes from localStorage when the app first loads.
We have another useEffect that saves notes to localStorage whenever the notes array changes.
The handleSubmit function adds a new note when the user submits the form.
The deleteNote function removes a note when the user clicks the delete button.
The component renders a form for adding notes and a list of all existing notes, with delete buttons for each.

Now, let’s add some styling to make it look nice. Open src/App.css and replace everything with:

.App {
text-align: center;
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.App-header {
margin-bottom: 30px;
}

.App-header h1 {
color: #2c3e50;
}

.note-form {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}

.note-input {
width: 100%;
height: 100px;
padding: 12px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
resize: vertical;
}

.add-button {
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

.add-button:hover {
background-color: #2980b9;
}

.notes-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}

.note-card {
background-color: #f9f9f9;
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
text-align: left;
position: relative;
min-height: 150px;
display: flex;
flex-direction: column;
}

.note-card p {
margin: 0;
margin-bottom: 20px;
flex-grow: 1;
word-wrap: break-word;
}

.delete-button {
padding: 5px 10px;
background-color: #e74c3c;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
align-self: flex-end;
transition: background-color 0.3s;
}

.delete-button:hover {
background-color: #c0392b;
}

.no-notes {
grid-column: 1 / -1;
color: #7f8c8d;
font-style: italic;
}

This CSS creates a clean, modern design for our app with responsive cards for our notes.

Testing Locally

Now it’s time to try out our app on your own computer. Start the development server:

npm start

This will open your browser to http://localhost:3000 where you can see your note-taking app in action. Try adding a few notes and refreshing the page – your notes should still be there thanks to localStorage!

Building the React App for Production

Before deploying our application to Cloudzilla, we need to build the React app for production:

npm run build

This creates a new “build” folder with optimized static files that are ready for deployment.

Storing Your Code on GitHub

Go to your github, create a new repository and name it “note taking app”

This is where we will be pushing our code to.
Now let’s put your app on GitHub so you can deploy it to Cloudzilla:

git init
git add .
git commit -m "Simple React note-taking app"
git remote add origin https://github.com/yourusername/note_taking_app.git
git branch -M main
git push -u origin main

Replace “yourusername” with your actual GitHub username.

This links your local repo to GitHub, sets main as the default branch, and uploads your code. We’re pushing to Github because Cloudzilla needs your code online to pull and deploy it.

Deploying to Cloudzilla

Now it’s time to put your app online so you can access it from anywhere!

Log in to Cloudzilla using your GitHub account
From the dashboard, select the option to import a repository

Find and select your note_taking_app repository

Configure your deployment:
- Cloudzilla automatically sets these for you but confirm the deployment settings.
  - Select the “Static Site” deployment option
  - Set the Build directory to build (this is where create-react-app puts the production files)
  - Choose a workspace name (like “notes”)

Choose a deployment region like North America.

Cloudzilla optimizes placement within the region for performance.

Click Deploy. Cloudzilla builds your react application and deploys it. and Boom your project is online within a few seconds!

Cloudzilla will give you a URL for your app once it’s ready (e.g https://wild-hawk-2373.czapps.net/).

Try Your App Online

Visit the URL that Cloudzilla gave you and try out your app! Add a note and check if it appears in the list

Remember that since we’re using localStorage for storage, your notes are saved in your browser. This means:

Your notes will persist even if you close the browser and come back later
Different devices or browsers won’t share the same notes
If you clear your browser data, your notes will be deleted

What You’ve Learned

You’ve now created a simple note-taking app with React and deployed it to Cloudzilla! This is a solid accomplishment. You’ve learned:

How to create a React application
How to use React hooks (useState and useEffect)
How to use localStorage to persist data
How to build a React app for production
How to deploy a React application to Cloudzilla

While this app is basic (just adding, viewing, and deleting notes), you’ve learned the core concepts of modern frontend web development and deployment. You can now expand on this by adding features like:

Editing existing notes
Organizing notes into categories
Adding due dates or priorities
Implementing a search function
Adding color coding for different types of notes

To make your app more powerful, you could also consider:

Implementing user authentication to keep notes private
Adding a backend service to store notes in a database instead of localStorage
Creating mobile-specific features for users on phones and tablets

The possibilities are endless, and this is just the beginning of what you can build with React and Cloudzilla!
Happy note-taking and coding!

About the Author

Omu Inetimi is a developer and writer who’s passionate about explaining complex concepts to both technical and non-technical audiences. With experience writing for a variety of technical publications, Omu focuses on creating accessible, engaging content that empowers readers to build effective solutions. When not coding or writing, you’ll find him playing chess online or sharing insights on Twitter.

On this page