Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@tommygonzaleza
tommygonzaleza authored Oct 28, 2024
1 parent 87fdb75 commit 37a03fb
Showing 1 changed file with 72 additions and 97 deletions.
169 changes: 72 additions & 97 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,126 +1,101 @@
<!-- hide -->
# Create an Excuse Generator using AI
# Build a Basic E-commerce App with Next.js!
<!-- endhide -->

## 🌱 How to start this project?

Do not clone this repository because we are going to be using a different template.
Do not clone this repository because we are going to use a different template.

We recommend opening the `flask template` or the `vanilla.js template` using a provisioning tool like [Codespaces](https://4geeks.com/lesson/what-is-github-codespaces) (recommended) or [Gitpod](https://4geeks.com/lesson/how-to-use-gitpod). Alternatively, you can [clone the github repository](https://4geeks.com/how-to/github-clone-repository) on your local computer using the `git clone` command.
> ⚠ You will need to have Node.js installed if you do it locally, but all of that is already installed on Codespaces or Gitpod!
These are the repositories you need to open or clone:
## 📝 Instructions

### Step 1: Set Up the Project

- [ ] Set up the base project by following the steps given in the official Next.js documentation: [https://nextjs.org/docs/getting-started/installation](https://nextjs.org/docs/getting-started/installation).

- [ ] Follow the instructions in the repository's README to set up your development environment.

### Step 2: Plan the App Structure

```txt
🐍 For Python:
https://github.com/4GeeksAcademy/flask-rest-hello
- [ ] Define the pages your application will have, such as:

👩🏽‍💻 For Javascript:
https://github.com/4GeeksAcademy/vanillajs-hello
- Main page displaying a list of products.
- Product detail page.
- Shopping cart.
- Checkout page.

- [ ] Decide how you will structure the components and routes in Next.js.

### Step 3: Create the Product List

- [ ] Create a sample dataset for your products. You can create a `products.json` file with an array of objects representing the products.

```json
[
{
"id": 1,
"name": "Product 1",
"price": 19.99,
"image": "/images/product1.jpg",
"description": "Description of Product 1"
}
// ...more products
]
```

> ⚠ You will need to have Node.js or Python 3.7+ installed if you do it locally, but all of that is already installed on Codespaces or Gitpod.
- [ ] In the main page (`pages/index.js`), import the product list and display each product with its name, image, and price.

## 📝 Instructions
### Step 4: Create the Product Detail Page

### Step 1: Set Up the Project
- [ ] Create a dynamic page for the product details in `pages/product/[id].js`.

- [ ] Choose your preferred language and set up the boilerplate project from the provided templates.
- For Python: Use the Flask template.
- For JavaScript: Use the VanillaJS template.

- [ ] Follow the instructions in the README of the respective repositories to set up your development environment.
- [ ] Use `getStaticPaths` and `getStaticProps` to generate static pages for each product.

### Step 2: Get Access to ChatGPT's API
### Step 5: Implement the Shopping Cart

- [ ] Sign up for an account at [OpenAI](https://www.openai.com/).
- [ ] Navigate to the API section and obtain your API key for accessing the free version of ChatGPT.
- [ ] Use the `useState` or `useContext` hook to manage the shopping cart state.

### Step 3: Create an Input Form or use a prompt if building the project on the terminal
- [ ] Create a context (`CartContext`) to share the cart state throughout the application.

- [ ] Implement an input form in your chosen language where users can specify what the excuse should be for.
- For Python (On the terminal): You might use the `prompt()` function to ask the user.
- For JavaScript (): You might create an HTML form and handle form submission with JavaScript by manipulating the DOM.
- [ ] Wrap your application with the `CartProvider` in `_app.js`.

### Step 6: Create the Cart Page

### Step 4: Connect to ChatGPT's API
- [ ] Create a `/cart` page that displays the products added to the cart.

- [ ] Use the value from the input form to create a prompt for the ChatGPT API request.
- [ ] Send the request to the ChatGPT API and handle the response.
- [ ] Allow the user to modify the quantity or remove products from the cart.

Example for Python:
```python
import requests
### Step 7: Create the Checkout Page

@app.route('/generate_excuse', methods=['POST'])
def generate_excuse():
excuse_for = request.form['excuse_for']
prompt = f"Give me an excuse for {excuse_for}:"

response = requests.post('https://api.openai.com/v1/engines/davinci-codex/completions',
headers={'Authorization': f'Bearer {api_key}'},
json={'prompt': prompt, 'max_tokens': 50})

excuse = response.json()['choices'][0]['text']
return render_template('result.html', excuse=excuse)
```
- [ ] Create a `/checkout` page where the user can enter their details and confirm the purchase.

Example for JavaScript:
```javascript
document.getElementById('excuseForm').addEventListener('submit', async (event) => {
event.preventDefault();
const excuseFor = document.getElementById('excuseFor').value;
const prompt = `Give me an excuse for ${excuseFor}:`;

const response = await fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ prompt: prompt, max_tokens: 50 })
});

const data = await response.json();
const excuse = data.choices[0].text;
// Display the excuse to the user
});
```
- [ ] It is not necessary to process real payments; you can simulate the process.

### Step 5: Display the Generated Excuse

- [ ] Once you receive the response from ChatGPT's API, display the generated excuse to the user.
- For Python (Flask): You might show the excuse in the terminal with a `print()`.
- For JavaScript: You might update the DOM to show the excuse.

Example for JavaScript:
```javascript
document.getElementById('excuseForm').addEventListener('submit', async (event) => {
event.preventDefault();
const excuseFor = document.getElementById('excuseFor').value;
const prompt = `Give me an excuse for ${excuseFor}:`;

const response = await fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
method: 'POST',
headers: {
'Authorization': `Bearer ${apiKey}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({ prompt: prompt, max_tokens: 50 })
});

const data = await response.json();
const excuse = data.choices[0].text;
document.getElementById('result').innerText = `Your excuse is: ${excuse}`;
});
```
### Step 8: Improve the User Interface

- [ ] Use CSS or a library like Tailwind CSS or Bootstrap to improve the design of your application.

- [ ] Ensure that the application is responsive and works well on different devices.

## Bonus Section

### Additional Features to Practice and Improve the Project

1. **Filtering and Search:** Implement functionalities to filter products by category and search by name.

2. **Quantity in Cart:** Allow the user to select the quantity of each product in the cart.

3. **Data Persistence:** Store the cart state in `localStorage` so it persists when the page is reloaded.

4. **User Authentication:** Implement a basic registration and login system.

5. **API Integration:** Connect your application with a real or simulated API to fetch the products.

### Bonus Section
6. **SEO Optimization:** Take advantage of Next.js's server-side rendering features to improve SEO.

#### Additional Features to Practice and Improve the Project
7. **Pagination:** If you have many products, add pagination to the product list.

1. **Styling:** Add CSS to style your web interface, making it more user-friendly and visually appealing.
2. **Customization:** Allow users to specify different types of excuses (e.g., work, school, family).
3. **History:** Store generated excuses in a database or local storage so users can view previously generated excuses.
4. **API Error Handling:** Add proper error handling for API requests to improve the user experience.
8. **Payment Processing:** Integrate a service like Stripe to process real payments.

Feel free to explore and add more features to make your Excuse Generator even more robust and user-friendly!
Explore different enhancements to make your e-commerce application more complete and functional!

0 comments on commit 37a03fb

Please sign in to comment.