Skip to content

Commit 87dbb7d

Browse files
sergeypanin1994sergeypanin1994
committed
docs: improved UI components guide for Celo Composer
- Fixed typos and improved readability - Standardized formatting for clarity - Enhanced step descriptions for a smoother setup experience docs: improved deployment guide for Celo Composer - Fixed typos and improved readability - Standardized formatting for better clarity - Enhanced step descriptions for a smoother deployment experience
1 parent 0468983 commit 87dbb7d

2 files changed

Lines changed: 78 additions & 77 deletions

File tree

‎docs/DEPLOYMENT_GUIDE.md‎

Lines changed: 50 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,99 @@
1-
# Deployment Guide for Celo Composer React/Next App Using Vercel CLI
1+
# **Deployment Guide for Celo Composer React/Next.js App Using Vercel CLI**
22

3-
This document provides step-by-step instructions for deploying your Next.js app to Vercel using the Vercel CLI.
3+
This document provides step-by-step instructions for deploying your Next.js app to Vercel using the Vercel CLI.
44

5-
## Prerequisites
5+
## **Prerequisites**
66

7-
1. **Node.js installed**: Ensure Node.js is installed on your system.
7+
1. **Node.js installed**: Ensure that Node.js is installed on your system.
88

9-
## Step 1: Install Vercel CLI
9+
## **Step 1: Install Vercel CLI**
1010

11-
Install Vercel CLI globally using npm or pnpm:
11+
Install the Vercel CLI globally using npm or pnpm:
1212

1313
```bash
1414
npm install -g vercel
1515
# OR if using pnpm
1616
pnpm add -g vercel
17-
```
17+
```
1818

19-
## Step 2: Login to Vercel
19+
## **Step 2: Log in to Vercel**
2020

21-
Log in to your Vercel account:
21+
Log in to your Vercel account:
2222

2323
```bash
2424
vercel login
25-
```
25+
```
2626

27-
Follow the on-screen instructions to authenticate your account.
27+
Follow the on-screen instructions to authenticate your account.
2828

29-
## Step 3: Goto React App
29+
## **Step 3: Navigate to the React App Directory**
3030

31-
Navigate to the root directory of your Next.js app:
31+
Move to the root directory of your Next.js app:
3232

3333
```bash
3434
cd packages/react-app
35-
```
35+
```
3636

37-
## Step 4: Deploy the App
37+
## **Step 4: Deploy the App**
3838

39-
To deploy your Celo Composer app using Vercel CLI, run:
39+
To deploy your Celo Composer app using the Vercel CLI, run:
4040

4141
```bash
4242
vercel
43-
```
43+
```
4444

45-
> [!NOTE]
46-
> First-Time Deployment:
47-
>
48-
> - The CLI will ask several questions, including project scope, project name, and framework detection.
49-
>
50-
> Subsequent Deployments:
51-
>
52-
> - Run vercel to deploy the latest changes without additional configuration.
45+
> **Note:**
46+
> **First-Time Deployment:**
47+
> - The CLI will ask several questions, including project scope, project name, and framework detection.
48+
>
49+
> **Subsequent Deployments:**
50+
> - Run `vercel` to deploy the latest changes without additional configuration.
5351
54-
## Step 5: View Deployment Status
52+
## **Step 5: View Deployment Status**
5553

56-
After deployment, you’ll receive a preview deployment URL:
54+
After deployment, you’ll receive a preview deployment URL:
5755

5856
```bash
5957
https://<project-name>.vercel.app
60-
```
58+
```
6159

62-
> [!IMPORTANT]
63-
> Important: This preview deployment is only accessible to the authenticated user (the Vercel account owner). To make your app publicly accessible, you need to deploy to production.
60+
> **Important:**
61+
> This preview deployment is only accessible to the authenticated user (the Vercel account owner). To make your app publicly accessible, you need to deploy it to production.
6462
65-
## Step 6: Deploy to Production
63+
## **Step 6: Deploy to Production**
6664

67-
To make the app publicly accessible, deploy it to production:
65+
To make the app publicly accessible, deploy it to production:
6866

6967
```bash
7068
vercel deploy --prod
71-
```
69+
```
7270

73-
This command creates a production deployment accessible to everyone.
71+
This command creates a production deployment that is accessible to everyone.
7472

75-
## Step 8: Configure Environment Variables
73+
## **Step 7: Configure Environment Variables**
7674

77-
If your app uses environment variables, configure them in Vercel:
75+
If your app uses environment variables, configure them in Vercel:
7876

79-
1. Go to the Vercel Dashboard.
80-
2. Select your project.
81-
3. Go to Settings > Environment Variables.
82-
4. Add variables for Development, Preview, and Production environments.
77+
1. Go to the **Vercel Dashboard**.
78+
2. Select your project.
79+
3. Navigate to **Settings > Environment Variables**.
80+
4. Add variables for Development, Preview, and Production environments.
8381

84-
Alternatively, use Vercel CLI:
82+
Alternatively, you can set environment variables using the Vercel CLI:
8583

8684
```bash
8785
vercel env add <variable-name> <variable-value>
88-
```
86+
```
8987

90-
## Step 9: Update Deployment
88+
## **Step 8: Update Deployment**
9189

92-
Whenever you make changes to your code, update the deployment:
90+
Whenever you make changes to your code, update the deployment:
9391

94-
- Preview deployment: `vercel`
95-
- Production deployment: `vercel --prod`
92+
- **For a preview deployment:**
93+
```bash
94+
vercel
95+
```
96+
- **For a production deployment:**
97+
```bash
98+
vercel --prod
99+
```

‎docs/UI_COMPONENTS.md‎

Lines changed: 28 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,70 @@
1-
# Adding UI Components to Your Next.js App
1+
# **Adding UI Components to Your Next.js App**
22

3-
This guide explains how to add UI components to your Next.js app using [ShadCN](https://ui.shadcn.com/), a component library that provides a set of pre-built, easy-to-use components. We will demonstrate the installation of ShadCN and provide an example of adding and using a button component.
3+
This guide explains how to add UI components to your Next.js app using [ShadCN](https://ui.shadcn.com/), a component library that provides a set of pre-built, easy-to-use components. We will demonstrate the installation of ShadCN and provide an example of adding and using a button component.
44

5-
## Step 1: Initialize ShadCN in Your Project
5+
## **Step 1: Initialize ShadCN in Your Project**
66

7-
To get started, install the ShadCN CLI globally:
7+
To get started, install the ShadCN CLI and initialize it in your project:
88

99
```bash
1010
cd packages/react-app
1111
npx shadcn@latest init -d
12-
```
12+
```
1313

14-
This command initializes ShadCN and adds its configuration to your project.
14+
This command initializes ShadCN and adds its configuration to your project.
1515

16-
## Step 3: Install the Button Component
16+
## **Step 2: Install the Button Component**
1717

18-
[ShadCN](https://ui.shadcn.com/) provides a variety of components, including buttons, inputs, cards, and [more](https://ui.shadcn.com/). To install the button component, use:
18+
[ShadCN](https://ui.shadcn.com/) provides a variety of components, including buttons, inputs, cards, and [more](https://ui.shadcn.com/). To install the button component, use:
1919

2020
```bash
21-
# add a button component
22-
21+
# Add a button component
2322
npx shadcn add button
24-
```
23+
```
2524

26-
This command adds the button component to your project’s components folder, making it available for use.
25+
This command adds the button component to your project’s `components/ui/` folder, making it available for use.
2726

28-
## Step 4: Import and Use the Button Component
27+
## **Step 3: Import and Use the Button Component**
2928

30-
Once the button component is installed, you can import and use it in your app.
29+
Once the button component is installed, you can import and use it in your app.
3130

32-
Open `app/page.tsx` and modify it as follows:
31+
Open `app/page.tsx` and modify it as follows:
3332

3433
```tsx
3534
import { Button } from '@/components/ui/button';
3635

37-
3836
export default function Home() {
3937

40-
// ... some functions
41-
4238
// Function to handle button click
4339
const handleClick = () => {
44-
// add an action
45-
console.log('I love the Celo Composer <3')
40+
console.log('I love the Celo Composer ❤️');
4641
};
4742

4843
return (
49-
// ... some components
5044
<div className="flex items-center justify-center min-h-screen">
5145
<Button onClick={handleClick}>Click Me</Button>
5246
</div>
53-
5447
);
5548
}
56-
```
49+
```
50+
51+
This will render a button at the center of the page.
5752

58-
This will render a button at the center of the page.
53+
## **Step 4: Additional Information**
5954

60-
## Additional Information
55+
### **Customizing the Button**
56+
You can customize the button’s styles in the generated [`components/ui/button.tsx`](../packages/react-app/components/ui/button.tsx) file.
6157

62-
- Customizing the Button: You can customize the button’s styles in the generated [`components/ui/button.tsx`](../packages/react-app/components/ui/button.tsx) file.
63-
- Installing Other Components: ShadCN offers a wide range of components, such as cards, inputs, and more. For example, to add the card or input component you can, use:
58+
### **Installing Other Components**
59+
ShadCN offers a wide range of components, such as cards, inputs, and more. To add other components, use:
6460

6561
```bash
66-
# add a card component
62+
# Add a card component
6763
npx shadcn add card
6864

69-
# add a input component
65+
# Add an input component
7066
npx shadcn add input
71-
```
67+
```
7268

73-
- Documentation: For more components and advanced usage, refer to [ShadCN documentation](https://ui.shadcn.com/docs).
69+
### **Documentation**
70+
For more components and advanced usage, refer to the [ShadCN documentation](https://ui.shadcn.com/docs).

0 commit comments

Comments
 (0)