🚴‍♂️ Bike Parts Management - Full Stack Case Study

---

🚨 Important Note on Backend Availability (Railway Free Tier)

💤 Heads-up!
The backend is hosted on Railway's free tier, which puts the server to sleep after periods of inactivity. This causes the first request to take few seconds to spin the service back up.

🛠️ To test the app without issues, please follow these steps:

1. Open the backend link first to wake up the server:
   👉 https://bikepartsapibackend-production.up.railway.app/api/v1/bikeparts/

2. Wait for the backend to finish loading (it may show a blank or JSON response — that’s okay).

3. Once the backend is awake, open the frontend app:
   👉 https://case-study-app.netlify.app/

✅ You’ll now be able to use the full application with a responsive backend.

---

---

⚠️⚠️⚠️ Important Note on Versions ⚠️⚠️⚠️

💻 Disclaimer:
⚠️ BIG APOLOGIES :( ⚠️ Due to the limitations of my PC (i work on corporate laptop where i do not have root access) this project runs on older software versions for compatibility. I realize this is not compliant with the requirements of the case study to use latest features of most up to date software, but i working on the case study over weekend gave me no control over my environment.

Tool	Version
Java	OpenJDK 1.8.0 (Java 8)
Node.js	v14.15.4

All configurations are tailored to these versions. Using others may cause errors.

---

📌 Project Overview

A full-stack application for managing bicycle parts, built as part of a developer case study. It includes:

• A Java Spring Boot REST API backend
• A React (Vite + Zustand + Tailwind) frontend

🔗 Live Deployments

• 🌐 Frontend (Netlify):
  https://case-study-app.netlify.app/

• 🔧 Backend (Railway):
  https://bikepartsapibackend-production.up.railway.app/api/v1/bikeparts

---

🚀 Core Features

• ✅ Full CRUD Operations — Create, Read, Update, Delete articles
• 🧾 Modal-Based Forms — Seamlessly add/edit articles with automatic article number generation
• ↕️ List Sorting — Ascending / Descending / None for Article Number and Name
• 🔍 Multi-Select Filtering — By Article Category, Bicycle Category, and Material
• 📄 Client-Side Pagination — 10 items per page

---

🛠️ Tech Stack

📦 Monorepo: Decoupled Frontend & Backend

🔙 Backend

• Language: Java 8 (OpenJDK 1.8.0)
• Framework: Spring Boot
• API: RESTful
• Database: PostgreSQL (Production) / H2 (Local)
• ORM & DAO: Spring Data JPA, Hibernate
• Build Tool: Maven
• Testing: JUnit 5, Mockito

🌐 Frontend

• Framework: React 17
• Build Tool: Vite
• Styling: Tailwind CSS
• State Management: Zustand
• API: Axios (with global interceptors)
• Routing: React Router DOM
• Testing: Jest, React Testing Library

---

🧑‍💻 Local Setup

🔧 Prerequisites

• Java JDK 8
• Node.js v14.15.4
• npm

🔙 Backend

cd backend
mvn spring-boot:run

Runs on http://localhost:8080

🌐 Frontend

cd frontend/bike-parts-ui
npm install
npm run start

Runs on http://localhost:3000

✅ Running Tests Backend

cd backend
mvn test

Frontend

cd frontend/bike-parts-ui
npm test

💡 Advanced Concepts & Highlights

🌐 Global Error Handling

• Axios interceptors for API failures
• React Error Boundaries for rendering issues
• Popup notifications for user feedback

🧠 Centralized State Management

• Zustand store separates state logic from UI
• Improves scalability and maintainability

⚡ Performance Optimizations

• Lazy Loading: Form modal is dynamically imported using React.lazy and Suspense
• Efficient Rendering: React.memo prevents unnecessary re-renders of pure components

🚀 Monorepo Deployment

Deployed from a single repository:

• Frontend: Deployed on Netlify
• Backend: Deployed on Railway