Examensarbete - Wedding cakes Front End Web Shop

This project is a Wedding cake front-end web shop built with React, TypeScript, and styled-components. It leverages modern tools and libraries to provide a seamless shopping experience. Below is a comprehensive guide on how to install, test, and run the project.

To open Love Story Cakes in the browser click here

Table of Contents

• Installation
• Dependencies
• Scripts
• GitHub Actions Workflow
• Documentation

Installation

To run the project, follow these steps:

1. Install dependencies:

   npm install
   

2. Run the development server:

   npm run dev
   

3. Open your browser and navigate to http://localhost:5173 to view the web shop.

Dependencies

This project utilizes several dependencies to enhance its functionality. Here's a list of key dependencies along with their versions:

• react: Documentation
• react-color: Documentation
• react-dom: Documentation
• react-icons: Documentation
• react-router-dom: Documentation
• react-select: Documentation
• react-toastify: Documentation
• styled-components: Documentation
• framer-motion: Documentation
• normalize.css: Documentation
• @google/model-viewer: Documentation
• @studio-freight/react-lenis: Documentation
• formik: Documentation
• yup: Documentation

For development, the project also includes various development dependencies. Refer to the devDependencies section in the package.json file for more details.

Scripts

The project includes several npm scripts to facilitate development and testing. Refer to the package.json file for a complete list of scripts. Except for installation and running the server, some common use scripts are:

1. Format the code with prettier:

   npm run format
   

2. Check for lint warnings and errors:

   npm run lint
   

3. Run tests:

   npm run test

GitHub Actions Workflow

This workflow runs on pull requests targeting the "main" branch. It does the following:

1. Checkout Code:

   • Action: actions/checkout@v3

2. Setup Node.js:

   • Action: actions/setup-node@v3
   • Configures Node.js version and caches npm dependencies.

3. Build and Test:

   • Commands:
     • npm ci: Installs dependencies.
     • npm run build: Compiles source code.
     • npm run lint: Checks for code issues.
     • npm run format: Formats code.
     • npm test --if-present: Runs tests.

Notes:

• Uses the latest version of Ubuntu.
• Tests with Node.js version 18.x.
• Caches npm dependencies for faster builds.

For more details, refer to the official documentation.

Documentation

Refer to the documentation links provided above for each dependency to explore their features, APIs, and usage guidelines. For additional information specific to this project, consult the project's internal documentation or reach out to the project maintainers.

Feel free to contribute, report issues, or suggest improvements. Happy coding!