Bru Pet Supplies Shop

University Assignment - Web Frameworks (Final Year)

A website for learning about wildlife and buying wildlife-related products and event tickets. Users can browse animals, shop for products, register for events, and manage their profile.

Screenshots

Home page of the Wildlife & Conservation Pet Shop

What This Project Does

• Animal Information: Look up facts about different animals
• Shop: Buy wildlife-related products
• Events: Browse and sign up for conservation events
• User Accounts: Create an account, log in, and manage your profile
• Vouchers: Download vouchers and receipts as PDF files
• Mobile Friendly: Works well on phones and computers

Tools & Technologies Used

• Next.js 16: Framework for building the website
• React 19: JavaScript library for creating the user interface
• TypeScript: JavaScript with type checking for safer code
• Tailwind CSS: Tool for styling the website
• Firebase: Service for handling user logins and accounts
• Animals API: External service that provides animal information
• React PDF: Tool for creating downloadable PDF files

How to Run This Project

What You Need First

• Node.js (version 18 or newer)
• npm (comes with Node.js)

Steps to Get It Running

1. Go to the project folder:

   cd assignment_1

2. Download all the code libraries:

   npm install

3. Set up your secret keys: Create a file called .env.local in the main folder and add your Firebase and API keys:

   NEXT_PUBLIC_FIREBASE_API_KEY=your_key_here
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_domain_here
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id_here
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_bucket_here
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id_here
   NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id_here
   API_NINJAS_KEY=your_api_key_here
   

4. Start the website:

   npm run dev

   Then open your browser and go to http://localhost:3000

Commands You Can Run

• npm run dev - Start the website for development
• npm run build - Prepare the website for public use
• npm start - Run the website after building

Folder Layout

app/
  ├── api/                 # Backend connections
  ├── components/         # Reusable webpage parts
  ├── assets/            # Data files (animals, events, products)
  ├── pages/             # Different pages (wildlife, shop, events, etc.)
  └── globals.css        # Website styling
lib/
  ├── firebase.ts        # User login setup
  └── wildlife.ts        # Animal data helpers
public/
  └── images/            # Pictures used on the site

Main Features

• User Accounts: Sign up and log in to save your information
• Animal Database: Search for information about different animals
• Shopping: Buy products online
• Event Registration: Sign up for wildlife events
• Download Files: Save vouchers and receipts as PDF documents
• Works on Phone: The website looks good on both computers and phones

Future Improvements

• Shopping Cart: Implement a proper cart system for purchasing multiple items
• Search & Filters: Add advanced search and filtering for animals, products, and events
• Admin Dashboard: Build an admin panel to manage products, events, and user data
• Email Notifications: Send confirmation emails for orders and event registrations
• Reviews & Ratings: Allow users to leave reviews and ratings for products and events
• Wishlist Feature: Let users save their favorite animals and products
• Event Calendar: Add a visual calendar view for browsing events