Beanly Coffee - Next.js Application

Beanly Coffee is a modern web application built with React and Next.js, offering a seamless user experience for coffee lovers to explore and create customised coffee plans. The app allows users to select their coffee preferences and set up personalised subscriptions.

Demo

You can access the live demo of the application here: Live Demo

Features

• Dynamic Coffee Plan Creation: Users can pick their preferred coffee type, frequency, and grind options.
• Responsive Design: Optimised for both mobile and desktop experiences.
• High-Quality UI: Clean and intuitive design with interactive components such as accordions and modals.
• Next.js Server-Side Rendering (SSR): Fast and SEO-friendly web pages.
• Testing with Jest: Includes thorough unit testing with Jest and React Testing Library.
• Accessibility: Focused on web accessibility standards with semantic HTML and ARIA attributes.

Getting Started

This project uses pnpm and the pnpm-lock.yaml lockfile.

Installation

Clone the repository and install dependencies:

git clone https://github.com/codehunt101/beanly-coffee.git
cd beanly-coffee
pnpm install

Running the Application

To run the development server, use the following command:

pnpm dev

This will start the app locally at `http://localhost:3000\`.

Building the Application

To create an optimised production build, run:

pnpm build

This will generate static and server-rendered pages under the `.next` folder, which can then be deployed to any hosting platform.

Running Tests

The application uses Jest for testing. To run tests:

pnpm test

Snapshot testing is also included to ensure the UI remains consistent.

---

Project Structure

The project follows a structured directory layout:

beanly-coffee/
|
│
├── /app/                       # Contains app-level pages and contexts
│   ├── /_context/              # Context for managing global state (e.g., PlanContext)
│   ├── /_utils/                # Utility functions and shared types
│   └── ...                     # Other application-specific files such as layouts, pages and sections and other tests
│
├── /__tests__/                 # Unit and component tests
│   ├── /components/            # Test files for each component
│   └── /snapshot/              # Snapshot tests
│
│── /public/                    # Static assets such as images
├── /hooks/                     # Reusable Hooks
├── /components/                # Reusable React components (e.g., Hero, NavBar, Accordion)
├── /styles/                    # Global styles
├── .eslintrc.js                # ESLint configuration
├── .prettierrc.js              # Prettier configuration
├── next.config.js              # Next.js configuration
└── tsconfig.json               # TypeScript configuration

Technologies Used

Testing

Testing is implemented using Jest and React Testing Library. Test files are located in the `tests` directory and page components and cover various components, ensuring reliability and performance.

Running Tests

To run all tests:

pnpm test

This will execute the unit tests, including snapshot tests to ensure UI consistency.

Contributing

We welcome contributions! Follow these steps to contribute:

1. Fork the repository.
2. Create a new branch for your feature/bugfix: `git checkout -b feature-name`
3. Make your changes and ensure tests are passing: `pnpm test`
4. Commit your changes: `git commit -m 'Add new feature'`
5. Push the branch: `git push origin feature-name`
6. Submit a pull request.