Personal Wardrobe Dashboard

This project is a personal wardrobe dashboard application built with React. The project leverages modern React patterns, including advanced navigation with React Router, global state management via React Context, and robust API integration. The dashboard was developed as an exercise in appying modern frontend techniques.

Home	Wardrobe	Stats

Features

• Wardrobe Management: Add, edit, and remove items from your virtual wardrobe.
• View wardrobe statistics and data visualizations
• Navigation: Seamless navigation between different sections of the app using React Router.
• Global State Management: Utilizes React Context to manage state across the application.
• API Integration: Fetches and manages data with external APIs for enhanced functionality.
• Responsive UI: Designed to be user-friendly across various devices.

Tech Stack

Technology	Purpose
React	Frontend framework
Vite	Build tool for fast dev env
TailwindCSS	Quick customizable styling
React Router	To navigate between pages using urls
Json-server	tool that simulates a RESTful API using a JSON file as the data source

Getting Started

Prerequisites

• Node.js (>=14.x)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/rainalexotl/personal-wardrobe-dashboard.git
   cd personal-wardrobe-dashboard

2. Install dependencies:

   npm install

Running the Project

npm run server

This runs the mock RESTful API at http://localhost:8000

In a separate terminal:

npm run dev

The app will be available at http://localhost:5173.

Project Structure

personal-wardrobe-dashboard/
│
├── data/                 # JSON files for mock API
├── public/               # Static assets
├── src/
│   ├── components/       # Reusable React components
│   ├── context/          # React context providers
│   ├── pages/            # Page components (views/screens)
│   ├── utils/            # Utility functions
│   ├── App.jsx           # Main App component
│   ├── main.jsx          # Entry point
│   └── index.css         # Tailwind and global styles
├── package.json
├── vite.config.js
├── eslint.config.js
└── README.md

Key Concepts Practiced

• React Functional Components: Built using hooks and modern best practices.
• React Router: For multi-page navigation.
• React Context: To manage and share state globally (e.g., user authentication, wardrobe items).
• API Integration: Fetching and updating wardrobe data from remote sources.

Future Improvements

• Add user authentication
• Enhance UI/UX with loading animations
• Statistics utils dont have fallback if wardrobe is empty

---

Created by rainalexotl