next-choco is a web application for an online chocolate store built with Next.js framework.
- Next.js: A React framework for building server-side rendered and statically generated applications.
- React: A JavaScript library for building user interfaces.
- CSS Modules: Local scoping of CSS by default in Next.js.
- Context API: For managing global state across the app.
- SWR: React Hooks library for data fetching.
- JavaScript: Programming language used for client-side and server-side logic.
- Routing: Static and dynamic routing, including grouping folders and infinite dynamic pages.
- Pages and Layouts: Creation of various pages and layout files affecting all subfolders.
- Components and Properties: Writing reusable components with methods, passing attributes, and looping through lists.
- State Management: Using useState for managing component state.
- CSS Styling: Global CSS and component/module CSS.
- Event Handling: Handling button clicks and informing parent components of updates.
- Client vs Server Rendering: Rendering pages on both client and server.
- Data Fetching: Fetching data on both client and server, utilizing SWR for client-side data fetching.
- Context Handling: Sharing state across the app using Context API.
- Next.js Components: Utilizing Link, Image, Head, Script components provided by Next.js.
- API Creation: Creating APIs with route.js for AJAX calls.
The project follows a standard Next.js project structure:
- pages: Contains all the page components.
- components: Contains reusable UI components.
- app: Contains context and services used across the app.
- styles: Contains global CSS files.
- public: Contains static assets like images and fonts.
- data: Contains JSON data for products and reviews.
- Clone this repository:
git clone https://github.com/olgatenison/next-choco.git - Install dependencies:
npm install - Run the development server:
npm run dev
This project, including design and execution, was skillfully crafted by Olga Tenison under the invaluable mentorship of Matthias Bruch.
This project uses Montserrat and Marcellus SC from Google Fonts.