Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rajanprajapati1/pixiemart-nextjs


https://github.com/rajanprajapati1/pixiemart-nextjs

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README 

        
**DISCLAIMER:**



** Here is PixieMart Demo Video **

#https://www.linkedin.com/feed/update/urn:li:activity:7204352982191116288/



**IMPORTANT NOTICE:**  

The original source code for Pixiemart was accidentally deleted. However, it has been successfully recovered. We apologize for any inconvenience this may have caused.



---



# Pixiemart - An E-commerce Website



**Description:**  

Pixiemart is an e-commerce website developed using Next.js, Tailwind CSS, and the Shards React UI component library. It integrates Stripe for secure payment processing, utilizes Stripe webhooks for real-time updates, and stores data using MongoDB via Mongoose. The application also leverages React context for efficient state management.



## Key Technologies:



- **Next.js**: Pixiemart is built on the Next.js framework, offering server-side rendering, static site generation, and other performance optimizations out of the box.

- **Tailwind CSS**: The project utilizes Tailwind CSS for styling, enabling rapid development and customization through utility classes.

- **ShadCn UI**: ShadCn  UI component library enhances the user interface with elegant and responsive components, ensuring a visually appealing and user-friendly experience.

- **Stripe**: Stripe integration enables secure payment processing, allowing customers to make purchases using various payment methods with confidence.

- **Stripe Webhooks**: Pixiemart employs Stripe webhooks for real-time updates on payment events, order processing, and other relevant activities, ensuring seamless transaction management.

- **MongoDB with Mongoose**: MongoDB serves as the database solution, and Mongoose provides a straightforward way to model application data and interact with the database from Node.js.

- **React Context**: React context is utilized for state management, facilitating the sharing of data and functionality across components without the need for prop drilling.



## GitHub Repository:



The source code for Pixiemart, including its Next.js, Tailwind CSS, Shards React, Stripe integration, MongoDB setup, and React context implementation, can be found on GitHub. Please note that the original Pixiemart source code was accidentally deleted, but it has been successfully recovered.



[GitHub Repository Link](https://github.com/your-username/pixiemart)



## Project Structure:



- `pages/`: Contains Next.js pages for different routes and views.

- `components/`: Includes reusable React components and UI elements.

- `styles/`: Houses Tailwind CSS configuration and custom stylesheets.

- `public/`: Stores static assets such as images and fonts.

- `lib/`: Contains utility functions, API integrations, and database configurations.

- `context/`: Holds React context providers and hooks for state management.

- `hooks/`: Includes custom hooks for common functionalities such as data fetching and form handling.



## Usage Instructions:



1. Clone the repository to your local machine:

   ```

   git clone https://github.com/your-username/pixiemart.git

   ```

2. Install dependencies:

   ```

   npm install

   ```

   or

   ```

   yarn install

   ```

3. Configure environment variables for Stripe API keys, MongoDB connection URI, and other sensitive information.

4. Run the development server:

   ```

   npm run dev

   ```

   or

   ```

   yarn dev

   ```

5. Access the Pixiemart website at `http://localhost:3000` and start exploring the e-commerce features.



## Contributing:



Contributions to Pixiemart are welcome! Feel free to submit bug fixes, feature enhancements, or suggestions via GitHub pull requests or issues.