Studio Logs

Demo

🔗 Live Demo: https://studio-logs.netlify.app/

Description

Studio Logs is a React-based music production log management application that allows users to create, update, delete, and organize production notes. Data is persisted locally using the browser's LocalStorage API.

Features

• Create, update, and delete production logs
• Track log status (Draft / In Progress / Finished)
• Persist data using LocalStorage
• Load initial data from a JSON seed file
• Restore default logs with Factory Reset functionality

Technologies

• React
• JavaScript (ES6+)
• Tailwind CSS
• Vite (Build Tool)
• LocalStorage API
• JSON (Seed Data)
• HTML5
• CSS3

Concepts Applied

• Component-based architecture
• React Hooks (useState, useEffect)
• CRUD operations
• Client-side data persistence

Project Structure

public/
└── logs.json

src/
├── components/
│   ├── Header.jsx
│   ├── LogCard.jsx
│   └── LogForm.jsx
├── pages/
│   └── Home.jsx
├── App.jsx
├── main.jsx
└── index.css

Prerequisites

• Node.js (18 or later recommended)
• npm

Installation

Install dependencies:

npm install

Start the development server:

npm run dev

The application will be available at:

http://localhost:5173

Screenshots