Trying to add a light theme, changed icons

Author: luloxi

README.md

@@ -1,80 +1,121 @@
-# 🏗 Scaffold-ETH 2
+E-commerce dApp to sell products without intermediaries 💰, while engaging with the community 🫂.
 
-<h4 align="center">
-  <a href="https://docs.scaffoldeth.io">Documentation</a> |
-  <a href="https://scaffoldeth.io">Website</a>
-</h4>
+# 🛍️ Features
 
-🧪 An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts.
+- 🤹‍♂️ **Articles media**: Articles can have text, image, audio, video and links
+- 💰 **Multiple payment methods**: Pay with native gas (ETH) or with USDC.
+- 📈 **Revenue dashboard**: Track and analyze your revenue and spending
+- 🔔 **Notifications**: Receive alerts on activity
+- 💌 **Messaging**: Private messaging to communicate between seller and buyer
+- 🎨 **Profile customization**: Users can customize their profile
+- 📱 **Web 2.5 login**: Social login options with Web2 platforms (Google, Twitter, etc.)
+- 🌐 **Multi-chain support**: Interact with the platform on multiple chains
+- 🎧 **Accessibility support**: ARIA compliant for screen readers and other assistive technologies
 
-⚙️ Built using NextJS, RainbowKit, Foundry, Wagmi, Viem, and Typescript.
+# 🛍️ Roadmap
 
-- ✅ **Contract Hot Reload**: Your frontend auto-adapts to your smart contract as you edit it.
-- 🪝 **[Custom hooks](https://docs.scaffoldeth.io/hooks/)**: Collection of React hooks wrapper around [wagmi](https://wagmi.sh/) to simplify interactions with smart contracts with typescript autocompletion.
-- 🧱 [**Components**](https://docs.scaffoldeth.io/components/): Collection of common web3 components to quickly build your frontend.
-- 🔥 **Burner Wallet & Local Faucet**: Quickly test your application with a burner wallet and local faucet.
-- 🔐 **Integration with Wallet Providers**: Connect to different wallet providers and interact with the Ethereum network.
+## 🐣 Phase 1 (MVP)
 
-![Debug Contracts tab](https://github.com/scaffold-eth/scaffold-eth-2/assets/55535804/b237af0c-5027-4849-a5c1-2e31495cccb1)
+- ✅ **Create BasedArticles contract**
+- ✅ **Create BasedProfile contract to register users info**
+- ✅ **Article creation tool**
+- ✅ **User profile page**
 
-## Requirements
+## 👥 Phase 2 (Social Activity and Indexing)
 
-Before you begin, you need to install the following tools:
+- ✅ **BasedSociety contract:** Social interactions
+- ✅ **Search**: By address or username
+- ✅ Enable options for sharing on other platforms
+- Enable following users, liking, commenting and sharing articles on frontend
+- **Notification system**
+- **Individual article viewer**
+- **Integrate The Graph to index activity** and save RPC calls (Reference: [Bootstrap a Full Stack Modern dapp using the Scaffold-ETH CLI and Subgraph Extension](https://siddhantk08.hashnode.dev/bootstrap-a-full-stack-modern-dapp-using-the-scaffold-eth-cli-and-subgraph-extension) | [The Graph tool for creating a subgraph](https://thegraph.com/docs/en/developing/creating-a-subgraph/))
 
-- [Node (>= v18.18)](https://nodejs.org/en/download/)
-- Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/) or [v2+](https://yarnpkg.com/getting-started/install))
+## 💰 Phase 3 (Shop features)
+
+- **Stablecoin payment methods:** Pay with native gas or with `$USDC`. (Reference: [Easy2Pay](https://github.com/luloxi/Easy2Pay))
+- **Categories**: Allow users to categorize their articles, filter by category and search by category
+- **Direct messages:** Allow users to send private messages to each other
+- **Dashboard Insights**: Track and analyze revenue
+- **Revenue Model**: BasedShop collects fees from purchases
+
+## ✍️ Phase 4 (Gasless activity)
+
+- **Signatures:** Interact with the platform without paying gas fees
+- **Database:** To store and retrieve EIP 712 signatures (Reference: [SE-2 firebase-auth-extension](https://github.com/ByteAtATime/firebase-auth-extension))
+
+## 💬 Phase 5 (Social enhancement)
+
+- Enable audio, video and links on articles
+- **Customization**: Allow users to customize their profile appearance
+
+## 👨‍🦽 Phase 6 (Ease of use)
+
+- **Account abstraction**: Interact with the platform without having to sign every interaction.
+- **Built-in wallet manager**: Built-in simple wallet for sending supported tokens and receiving funds, generating and scanning QR, buying gas, etc (Reference: [PunkWallet](https://app.buidlguidl.com/build/mTKhXMLEOCQEgPgG57R9)
+- **Accesibility support**: For the hearing and visually impaired, the app should be ARIA compliant to support screen readers and other assistive technologies (Reference: [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA))
+- **Web 2.5 social login:** Sign up and log in with Google, Twitter, Instagram, etc
+- **Multi-language support**: Switch between languages
+- **Educational Content**: Include onboarding tutorials and step-by-step guides to help users understand NFTs and Web3 concepts
+
+# 🛍️ Development
+
+## 🛠️ Technical details
+
+⚙️ Built using Foundry, NextJS, RainbowKit, Wagmi, Viem, and Typescript,
+
+🔗 To be deployed on Base and/or EVM compatible chains
+
+📥 To see current development tasks, [see here](https://lulox.notion.site/BasedShop-11e13362a5748056b5bfe8bc5d4ff260?pvs=4)
+
+## 📚 Prerequisites
+
+- [Node (>= v18.17)](https://nodejs.org/en/download/package-manager)
+- Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/#windows-stable) or [v2+](https://yarnpkg.com/getting-started/install))
 - [Git](https://git-scm.com/downloads)
+- [Foundry](https://book.getfoundry.sh/getting-started/installation)
 
-## Quickstart
+## 👨‍🏫 Instructions
 
-To get started with Scaffold-ETH 2, follow the steps below:
+To get started follow the steps below:
 
-1. Install dependencies if it was skipped in CLI:
+1. Open a terminal and run this commands to clone this repo and install dependencies:
 
 ```
-cd my-dapp-example
+git clone https://github.com/luloxi/BasedShop.git
+cd BasedShop
 yarn install
 ```
 
-2. Run a local network in the first terminal:
+2. After everything is installed, run this command to start a local blockchain network:
 
 ```
 yarn chain
 ```
 
-This command starts a local Ethereum network using Foundry. The network runs on your local machine and can be used for testing and development. You can customize the network configuration in `packages/foundry/foundry.toml`.
+This command starts a local Ethereum network using Foundry. The network runs on your local machine and can be used for testing and development.
 
-3. On a second terminal, deploy the test contract:
+3. Duplicate and rename `packages/foundry/.env.example` to `packages/foundry/.env` (you don't need to fill it out until deploying to a live network)
 
-```
-yarn deploy
-```
-
-This command deploys a test smart contract to the local network. The contract is located in `packages/foundry/contracts` and can be modified to suit your needs. The `yarn deploy` command uses the deploy script located in `packages/foundry/script` to deploy the contract to the network. You can also customize the deploy script.
-
-4. On a third terminal, start your NextJS app:
+4. Open a second terminal, navigate to `BasedShop` and run this command to deploy the test contract:
 
 ```
-yarn start
+yarn deploy
 ```
 
-Visit your app on: `http://localhost:3000`. You can interact with your smart contract using the `Debug Contracts` page. You can tweak the app config in `packages/nextjs/scaffold.config.ts`.
+This command deploys a test smart contract to the local network. The contract is located in `packages/foundry/contracts` and can be modified to suit your needs. The `yarn deploy` command uses the deploy script located in `packages/foundry/script/Deploy.s.sol` to deploy the contract to the network. You can also customize the deploy script.
 
-Run smart contract test with `yarn foundry:test`
+5. Go to `packages/nextjs/scaffold.config.ts` and comment out `targetNetworks: [chains.sepolia]` and uncomment `targetNetworks: [chains.foundry]`
 
-- Edit your smart contract `YourContract.sol` in `packages/foundry/contracts`
-- Edit your frontend homepage at `packages/nextjs/app/page.tsx`. For guidance on [routing](https://nextjs.org/docs/app/building-your-application/routing/defining-routes) and configuring [pages/layouts](https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts) checkout the Next.js documentation.
-- Edit your deployment scripts in `packages/foundry/script`
+6. Rename the `.env.example` to `.env` in the `packages/nextjs` folder.
 
+- [Log in or Create an account on Pinata](https://app.pinata.cloud/signin), then create a new project, and copy the **API Key** and the **Secret API Key** into the `.env` file's `NEXT_PUBLIC_PINATA_API_KEY` and `NEXT_PUBLIC_PINATA_SECRET_API_KEY` variables and save the file.
+- Get your [OnchainKit API Key here](https://portal.cdp.coinbase.com/products/onchainkit) and your [OnchainKit Project ID here](https://portal.cdp.coinbase.com/projects/), then copy them into the `.env` file's `NEXT_PUBLIC_ONCHAINKIT_API_KEY` and `NEXT_PUBLIC_CDP_PROJECT_ID` variables and save the file.
 
-## Documentation
+7. Open a third terminal, navigate to `BasedShop` and run this command to start your NextJS app:
 
-Visit our [docs](https://docs.scaffoldeth.io) to learn how to start building with Scaffold-ETH 2.
-
-To know more about its features, check out our [website](https://scaffoldeth.io).
-
-## Contributing to Scaffold-ETH 2
-
-We welcome contributions to Scaffold-ETH 2!
+```
+yarn start
+```
 
-Please see [CONTRIBUTING.MD](https://github.com/scaffold-eth/scaffold-eth-2/blob/main/CONTRIBUTING.md) for more information and guidelines for contributing to Scaffold-ETH 2.
+Visit your app on: `http://localhost:3000`. You can interact with your smart contract using the `Debug Contracts` page.