📚 Knowledge Store - Frontend

Empowering Knowledge, Transforming Reading Experiences

🛠️ Built With

📋 Table of Contents

🎯 Overview
✨ Features
🏗️ Architecture
🚀 Getting Started
📦 Installation
🔧 Configuration
🐳 Docker Deployment
📁 Project Structure
🔒 Authentication
🛡️ Protected Routes
🧠 State Management
🎨 UI Components
📱 Responsive Design
🔍 Development Tools
📜 Scripts
🤝 Contributing
📄 License

🎯 Overview

Knowledge Store is a modern, full-stack book rental platform built with React and Vite. It offers an intuitive user experience for browsing, renting, and managing books with robust authentication, state management, and responsive design.

🌟 Why Knowledge Store?

This project demonstrates best practices in modern web development with:

Scalable Architecture: Modular component structure with clear separation of concerns
Advanced Authentication: Google OAuth integration with cookie-based sessions
State Management: Hybrid approach using Redux Toolkit and Context API
Modern UI: Responsive design with Tailwind CSS and NextUI components
Developer Experience: Hot reload, ESLint, and containerized deployment

✨ Features

🔐 Authentication & Authorization

Google OAuth Integration - Seamless social login
Email/Password Authentication - Traditional login system
Cookie-based Sessions - Secure session management
Protected Routes - Role-based access control
Onboarding Flow - New user setup process

📚 Book Management

Browse Books - Categorized book listings
Search Functionality - Find books by title, author, or genre
Book Preview - Detailed book information
Wishlist - Save favorite books
Shopping Cart - Manage book rentals
Order Management - Track rental history

🎨 User Experience

Responsive Design - Mobile-first approach
Dark/Light Mode - Theme switching capability
Loading States - Smooth transitions and feedback
Toast Notifications - Real-time user feedback
Animated Interactions - Framer Motion animations

📱 Categories Available

Finance
Biography
Fictional
Santana-Dharma
Self-Help
Skill-based

🏗️ Architecture

State Management Strategy

├── Redux Store (Global State)
│   ├── Alert Slice - Notification management
│   └── Book Details Slice - Book data & async operations
│
├── Context API (Auth & Loading)
│   ├── AuthContext - User authentication state
│   └── LoadingContext - Global loading states
│
└── Local State - Component-specific data

Component Organization

src/
├── Components/
│   ├── Categories/      # Book category components
│   ├── Features/        # Core functionality
│   │   ├── Account/     # User profile & settings
│   │   ├── Forms/       # Authentication forms
│   │   └── orders/      # Order management
│   ├── Home/           # Landing page components
│   ├── Navbar/         # Navigation components
│   └── utils/          # Shared utilities
│
├── context/            # React Context providers
├── hooks/              # Custom React hooks
└── Store/              # Redux store configuration

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

Node.js (v18 or higher)
npm (v9 or higher)
Docker (for containerized deployment)

System Requirements

OS: Windows, macOS, or Linux
Memory: 4GB RAM minimum
Storage: 1GB free space

📦 Installation

1. Clone the Repository

git clone https://github.com/lakshay2425/KnowledgeStore
cd KnowledgeStore/frontend

2. Install Dependencies

npm install

3. Environment Setup

# Copy environment template
cp .env.sample .env

# Edit .env file with your configuration
nano .env

4. Start Development Server

npm run dev

The application will be available at http://localhost:4000

🔧 Configuration

Environment Variables

Create a .env file in the root directory with the following variables:

# Backend API Configuration
VITE_BACKEND_URL=http://localhost:5000/api
VITE_AUTH_URL=http://localhost:5000/auth

# Frontend Configuration
VITE_FRONTEND_URL=http://localhost:4000

# Google OAuth Configuration
VITE_GOOGLE_CLIENT_ID=your_google_client_id_here

# Development Settings
VITE_DEV_MODE=false

Configuration Details

Variable	Description	Required
`VITE_BACKEND_URL`	Main API endpoint	✅
`VITE_AUTH_URL`	Authentication service URL	✅
`VITE_FRONTEND_URL`	Frontend application URL	✅
`VITE_GOOGLE_CLIENT_ID`	Google OAuth client ID	✅
`VITE_DEV_MODE`	Skip authentication in dev	❌

🐳 Docker Deployment

Production Build

# Build production image
docker build -f Docker/Dockerfile -t knowledge-store-frontend .

# Run container
docker run -p 3000:3000 knowledge-store-frontend

Development Build

# Build development image
docker build -f Docker/Dockerfile.dev -t knowledge-store-dev .

# Run development container
docker run -p 4000:4000 knowledge-store-dev

Multi-Stage Build Benefits

Optimized Size: Production image excludes development dependencies
Security: Non-root user execution
Performance: Nginx serving static files
Caching: Efficient Docker layer caching

📁 Project Structure

frontend/
├── 📁 public/                 # Static assets
├── 📁 src/
│   ├── 📄 App.jsx            # Main application component
│   ├── 📄 main.jsx           # Application entry point
│   ├── 📄 index.css          # Global styles
│   ├── 📁 Components/
│   │   ├── 📁 Categories/    # Book category components
│   │   │   ├── BestSellers.jsx
│   │   │   ├── Category.jsx
│   │   │   └── Recommended.jsx
│   │   ├── 📁 Features/      # Core functionality
│   │   │   ├── 📁 Account/   # User account management
│   │   │   ├── 📁 Forms/     # Authentication forms
│   │   │   ├── 📁 orders/    # Order management
│   │   │   ├── BookPreview.jsx
│   │   │   ├── Cart.jsx
│   │   │   └── Wishlist.jsx
│   │   ├── 📁 Home/          # Landing page
│   │   ├── 📁 Navbar/        # Navigation
│   │   └── 📁 utils/         # Utilities & helpers
│   ├── 📁 context/           # React Context
│   │   ├── AuthContext.jsx
│   │   └── LoadingContext.jsx
│   └── 📁 hooks/             # Custom hooks
├── 📁 Store/                 # Redux configuration
│   └── store.jsx
├── 📁 features/              # Redux slices
│   ├── alertSlice.js
│   └── bookDetailsSlice.js
├── 📁 Docker/                # Docker configuration
│   ├── Dockerfile
│   ├── Dockerfile.dev
│   └── .dockerignore
├── 📄 package.json           # Dependencies & scripts
├── 📄 vite.config.js         # Vite configuration
├── 📄 tailwind.config.js     # Tailwind CSS config
├── 📄 .eslintrc.cjs          # ESLint configuration
└── 📄 README.md              # Project documentation

🔒 Authentication

Authentication Flow

Login Options
- Email/password authentication
- Google OAuth integration
Session Management
- Cookie-based session storage
- Automatic session validation
- Secure token handling
User Onboarding
- New user profile completion
- Required information collection
- Onboarding status tracking

Authentication Context

const AuthContext = {
  isAuthenticated: boolean,
  isLoading: boolean,
  gmail: string,
  onBoarded: boolean,
  setIsAuthenticated: (boolean) => void,
  setGmail: (string) => void,
  setOnBoarded: (boolean) => void
}

Google OAuth Implementation

// Google Login Configuration
const handleGoogleLogin = useGoogleLogin({
  onSuccess: googleResponse,
  onError: handleGoogleError,
  flow: "auth-code",
});

🛡️ Protected Routes

Route Protection Levels

The application implements a sophisticated route protection system:

const protectedRoutes = [
  {
    path: '/Cart',
    protected: true,
    requiresOnboarding: true,
    fallback: '/Login',
    errorMessage: "You need to login to access your Cart"
  },
  {
    path: '/Profile',
    protected: true,
    requiresOnboarding: true,
    fallback: '/Login',
    errorMessage: "You need to login to access your profile"
  }
];

Protection Types

Public Routes - Accessible to all users
- Home (/)
- Category pages (/Finance, /Biography, etc.)
- Book preview (/:bookName)
Protected Routes - Require authentication
- Shopping Cart (/Cart)
- Wishlist (/Wishlist)
- User Profile (/Profile)
Onboarding Required - Need completed user profile
- Contact Form (/Contact)
- Feedback Form (/Feedback)
- Suggestion Form (/Suggestion)

Development Mode

// Skip authentication in development
if (devMode) {
  return <div>{renderPage}</div>;
}

🧠 State Management

Redux Store Structure

store = {
  alert: {
    type: string,
    message: string,
    isVisible: boolean
  },
  book: {
    booksInfo: Array,
    genreBookInfo: Array,
    recommendedBooksInfo: Array,
    bookFetched: boolean,
    loading: boolean
  }
}

Key Actions

Alert Management

// Set alert notification
dispatch(setAlert({
  type: 'success',
  message: 'Operation completed successfully'
}));

// Clear alert
dispatch(clearAlert());

Book Operations

// Fetch all books
dispatch(fetchBooks());

// Filter books by genre
dispatch(filterBooks('Fiction'));

// Fetch recommended books
dispatch(fetchRecommendedBooks());

Context API Usage

AuthContext - Manages user authentication state LoadingContext - Controls global loading states

🎨 UI Components

Design System

Framework: Tailwind CSS for utility-first styling
Component Library: NextUI for consistent UI components
Icons: Lucide React for modern iconography
Animations: Framer Motion for smooth interactions

Key Component Libraries

{
  "@nextui-org/react": "^2.4.8",
  "@headlessui/react": "^1.7.18",
  "@radix-ui/themes": "^3.1.4",
  "framer-motion": "^11.11.11",
  "lucide-react": "^0.462.0",
  "react-icons": "^5.2.1"
}

Styling Architecture

// Tailwind Configuration
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()]
}

📱 Responsive Design

Breakpoint Strategy

Mobile First: Base styles target mobile devices
Progressive Enhancement: Larger screens add complexity
Flexible Grid: CSS Grid and Flexbox for layouts
Responsive Typography: Fluid text scaling

Example Responsive Implementation

<div className="min-h-screen bg-gray-50 flex items-center justify-center p-2 sm:p-4">
  <div className="bg-white rounded-xl sm:rounded-2xl p-4 sm:p-6 md:p-8 w-full max-w-[320px] sm:max-w-md shadow-lg sm:shadow-2xl">
    <h2 className="text-xl sm:text-2xl font-bold text-black font-serif">
      Welcome back
    </h2>
  </div>
</div>

🔍 Development Tools

Code Quality

ESLint Configuration

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh']
}

Development Features

Hot Module Replacement - Instant updates during development
TypeScript Support - Type checking for better code quality
Auto-formatting - Consistent code style
Import Optimization - Automatic import organization

Browser DevTools Integration

Redux DevTools - State debugging
React DevTools - Component inspection
Vite DevTools - Build analysis

📜 Scripts

Available Commands

{
  "dev": "vite --host --port 4000",
  "build": "vite build",
  "preview": "vite preview",
  "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0"
}

Script Details

Command	Description	Usage
`npm run dev`	Start development server	Development
`npm run build`	Build for production	Deployment
`npm run preview`	Preview production build	Testing
`npm run lint`	Run ESLint checks	Code quality

Custom Development Workflow

# 1. Start development environment
npm run dev

# 2. Run linting (in separate terminal)
npm run lint

# 3. Build for production testing
npm run build
npm run preview

# 4. Docker development
docker-compose up -f docker-compose.dev.yml

🔧 Advanced Features

Custom Hooks

`useLocalStorageState`

const [user, setUser] = useLocalStorageState("userInfo", null);

`useAlert`

const { handleSuccess, handleError } = useAlert();

API Integration

Axios Configuration

// Automatic credential inclusion
axios.defaults.withCredentials = true;

// Custom axios instance with interceptors
const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_BACKEND_URL,
  withCredentials: true
});

Security Features

CSRF Protection - Cookie-based authentication
Input Sanitization - XSS prevention
Route Protection - Unauthorized access prevention
Environment Variables - Sensitive data protection

🚨 Error Handling

Error Boundary Implementation

// Global error handling with toast notifications
const { handleError } = useAlert();

try {
  // API operations
} catch (error) {
  if (error.response?.status === 429) {
    handleError("Rate limit exceeded. Please try again later.");
  } else if (error.response?.status === 404) {
    handleError("Resource not found");
  } else {
    handleError("An unexpected error occurred");
  }
}

Error Types Handled

Network Errors - Connection issues
Authentication Errors - Invalid credentials
Authorization Errors - Insufficient permissions
Validation Errors - Form input errors
Rate Limiting - API throttling

🧪 Testing Strategy

Recommended Testing Approach

Unit Testing - Individual component testing
Integration Testing - Component interaction testing
E2E Testing - Full user workflow testing

📊 Performance Optimization

Current Optimizations

Code Splitting - Lazy loading with React.lazy()
Bundle Optimization - Vite's efficient bundling
Image Optimization - WebP format support
Caching Strategy - Service worker ready

Lazy Loading Implementation

const components = {
  BookPreview: lazy(() => import('./Components/Features/BookPreview')),
  Home: lazy(() => import('./Components/Home/Home')),
  Category: lazy(() => import('./Components/Categories/Category')),
  // ... more components
};

Performance Metrics to Monitor

First Contentful Paint - Initial render speed
Largest Contentful Paint - Main content load
Cumulative Layout Shift - Layout stability
Time to Interactive - User interaction readiness

🤝 Contributing

Development Setup

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Make your changes

Run tests and linting

npm run lint
npm run test  # when implemented

Commit your changes

git commit -m 'Add some amazing feature'

Push to the branch
```
git push origin feature/amazing-feature
```
Open a Pull Request

Code Standards

Follow ESLint configuration
Write meaningful commit messages
Add comments for complex logic
Maintain consistent naming conventions
Update documentation when needed

Issue Reporting

When reporting issues, please include:

Environment details (OS, Node version, browser)
Steps to reproduce the issue
Expected behavior vs actual behavior
Screenshots if applicable
Error messages or console logs

🔮 Future Enhancements

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

React Team - For the amazing framework
Vite Team - For the lightning-fast build tool
NextUI - For beautiful UI components
Tailwind CSS - For utility-first CSS framework
Community Contributors - For ongoing support and feedback

Built with ❤️ by Lakshay

Back to Top ⬆️

Name		Name	Last commit message	Last commit date
Latest commit History 259 Commits
.github/workflows		.github/workflows
Docker		Docker
Store		Store
features		features
public		public
src		src
.env.sample		.env.sample
.eslintrc.cjs		.eslintrc.cjs
.gitattributes		.gitattributes
.gitignore		.gitignore
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
vite.config.js		vite.config.js

lakshay2425/KnowledgeStore

Folders and files

Latest commit

History

Repository files navigation