Salmon Cookies Revamped

The Salmon Cookies App is a web application that displays sales information for different store locations of a store that sells cookies. It allows users to view the hourly sales data and total sales for each location, as well as add new store locations dynamically.

Features

• Display sales information for multiple store locations.
• Calculate and display hourly sales data and total sales for each location.
• Add new store locations dynamically using a form.
• Showcase a carousel with a rotation of images.
• Autoplay functionality for the carousel with pause on hover.

Technologies Used

• React: A JavaScript library for building user interfaces.
• Material-UI: A popular React UI framework for building responsive and beautiful UIs.
• react-material-ui-carousel: A Carousel component library for React with Material-UI styling.
• Next.js: A framework for building server-rendered React applications.
• MUI: A library of customizable React components for Material Design.
• react-responsive-carousel: A responsive carousel component for React.
• JavaScript: The programming language used for the application logic.
• HTML: The markup language for structuring the web page.
• CSS: The styling language for applying visual styles to the web page.

Getting Started

1. Clone the repository: git clone https://github.com/your-username/sales-information-app.git
2. Navigate to the project directory: cd sales-information-app
3. Install the dependencies: npm install
4. Start the development server: npm run dev
5. Open your browser and visit http://localhost:3000 to see the application.

Usage

1. Upon opening the application, you will see the sales information for the existing store locations.
2. To add a new store location, fill in the required fields in the store form and click the "Create Store" button.
3. The new store will be added to the sales information table, and the total sales will be updated accordingly.
4. The carousel component will automatically start rotating the images. It will pause when you hover over it.

Folder Structure

• /components: Contains the reusable React components used in the application.
  • /store-form: Contains the form component for adding new store locations.
  • /store-sales: Contains the component for displaying sales information.
  • /carousel: Contains the component for the image carousel.
• /pages: Contains the Next.js pages for rendering different views of the application.
  • sales-info.jsx: The main page component that displays the sales information and includes the store form and carousel.
• /public: Contains static assets, such as images used in the application.
• /styles: Contains global CSS styles for the application.
• README.md: Provides information about the application, its features, and instructions for installation and usage.
• package.json: Lists the project dependencies and includes scripts for running the application.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvement, please feel free to submit a pull request or open an issue.

License

This project is licensed under the MIT License.

Acknowledgments

• The Sales Information App was developed as a learning project and may not reflect a production-ready application.
• Thanks to ChatGPT for assisting on the code

Collaborators

Tim Maupin Emmanuel Gonzalez