Cat Journal (Full Stack)

A journal app for logging your cats' daily adventures — built with a React frontend and an Express backend, connecting them full circle.

Getting Started

1. Clone the repository

   git clone <your-repo-url>
   cd react-express-sample-app

2. Install dependencies (root, server, and client)

   npm run install-all

3. Run the app (starts both servers at once)

   npm run dev

   • Express API → http://localhost:5000
   • React app → http://localhost:3000

   You can also run them individually with npm run server or npm run client.

Project Structure

├── client/          React app (Vite)
│   ├── index.html   Page shell that loads the React app
│   └── src/         Components, styles, and app logic
│       ├── App.jsx  The main component — cards, form, and state
│       └── main.jsx Entry point that renders <App />
├── server/          Express API
│   └── index.js     Routes, middleware, and the in-memory entries array
├── package.json     Root scripts to run both apps with one command
└── README.md        You are here

• client/ — the React frontend. It displays journal entries as cards, has a form for adding new entries, and a delete button on each card. It talks to the server using fetch.
• server/ — the Express backend. It keeps journal entries in an in-memory array (no database) and exposes REST routes: GET /entries, POST /entries, PUT /entries/:id, and DELETE /entries/:id.

What You'll Build

The app is almost complete — the styling, components, state, and most routes are done. Your job is to write the code that connects the two halves:

1. Server: the DELETE route — add a route that removes an entry by id and sends back a confirmation message. (server/index.js)
2. Client: load entries on mount — use fetch inside useEffect to GET all entries from the API and store them in state. (client/src/App.jsx)
3. Client: add a new entry — use fetch to POST the title and text from state to the API. Don't forget the Content-Type header and JSON.stringify. (client/src/App.jsx)
4. Client: delete an entry — use fetch to send a DELETE request for a specific entry, then refresh the list. (client/src/App.jsx)

Each spot is marked with a TODO comment telling you exactly what to do.

Branches

• main — the starter project with TODOs (you are here)
• completed — the finished app with all TODOs implemented, if you want to peek at the solution

---

Made with 🐾 by QuickStart Guides Academy