Organize your shopping efficiently with this full-featured shopping list application. Users can register, log in, create multiple shopping lists, organize items by categories, and manage their shopping experience through a modern, responsive interface.
Built with React, TypeScript, Redux Toolkit, and Vite. Features user authentication, shopping list management with categories, and a responsive UI.
- User Authentication: Registration and login with encrypted passwords
- Shopping List Management: Create, edit, and delete shopping lists
- Category Filtering: Filter items by category
- User Profiles: View and manage user profile information
- Protected Routes: Authentication-based route protection
- Responsive Design: Mobile-friendly UI with CSS modules
- State Management: Redux Toolkit for centralized state management
- Frontend: React 19, TypeScript
- State Management: Redux Toolkit, React-Redux
- Build Tool: Vite
- Styling: CSS Modules
- Routing: React Router v7
- Authentication: Crypto-JS for password encryption
- Database: JSON Server (development)
- Node.js (v14 or higher)
- npm or yarn
- Install dependencies:
npm install- Start the JSON Server (in one terminal):
npx json-server src/db/db.json --port 4000- Start the development server (in another terminal):
npm run devThe application will be available at http://localhost:5173
npm run dev- Start the development server with Vitenpm run build- Build the project for productionnpm run preview- Preview the production buildnpm run lint- Run ESLint to check code quality
src/
├── components/ # Reusable React components
├── pages/ # Page components for different routes
├── styles/ # CSS modules for page styling
├── types/ # TypeScript type definitions
├── db/ # JSON database file
├── authSlice.ts # Redux auth state management
├── shoppingListSlice.ts # Redux shopping list state
├── shoppingListApi.ts # API calls for shopping lists
└── store.ts # Redux store configuration
- Login Page - User authentication
- Registration Page - New user account creation
- Home Page - Landing page for authenticated users
- Shopping List Page - Main shopping list management
- Profile Page - User profile management
- Not Found Page - 404 error handling
Navbar- Navigation bar with logout buttonProtectedRoute- Route protection wrapperShoppingListForm- Form for adding/editing itemsShoppingListItem- Individual shopping list itemCategoryFilter- Filter items by categoryInputField- Reusable input componentErrorMessage- Error notification displaySuccessMessage- Success notification displayLoadingSpinner- Loading indicator
User passwords are encrypted using Crypto-JS before storage. The app uses Redux to manage authentication state and protects sensitive routes with the ProtectedRoute component.