https://github.com/codehunt101/beanly-coffee
Accessible, performant and SEO optimised wesite built with React and Next.js and styled with vanilla CSS using SASS pre-processor.
https://github.com/codehunt101/beanly-coffee
accessibility css html nextjs react scss typescript
Last synced: 2 months ago
JSON representation
Accessible, performant and SEO optimised wesite built with React and Next.js and styled with vanilla CSS using SASS pre-processor.
- Host: GitHub
- URL: https://github.com/codehunt101/beanly-coffee
- Owner: CodeHunt101
- Created: 2024-09-05T01:09:51.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-06-07T07:57:59.000Z (about 1 year ago)
- Last Synced: 2025-07-01T05:07:08.331Z (12 months ago)
- Topics: accessibility, css, html, nextjs, react, scss, typescript
- Language: TypeScript
- Homepage: https://beanly-coffee.vercel.app
- Size: 9.58 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://beanly-coffee.vercel.app/)
## 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
### Installation
Clone the repository and install dependencies:
```bash
git clone https://github.com/codehunt101/beanly-coffee.git
cd beanly-coffee
npm install
```
### Running the Application
To run the development server, use the following command:
```bash
npm run dev
```
This will start the app locally at \`http://localhost:3000\`.
### Building the Application
To create an optimised production build, run:
```bash
npm run 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:
```bash
npm test
```
Snapshot testing is also included to ensure the UI remains consistent.
---
## Project Structure
The project follows a structured directory layout:
```plaintext
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:
```bash
npm 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: \`npm 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.