https://github.com/singh-anushka/shecents
https://github.com/singh-anushka/shecents
clerk-authentication dribble google-analytics neon-db next-js node-js postgress-sql react-js tailwind-css
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/singh-anushka/shecents
- Owner: singh-anushka
- Created: 2024-05-02T14:51:48.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-22T19:44:15.000Z (12 months ago)
- Last Synced: 2024-10-29T23:04:50.110Z (12 months ago)
- Topics: clerk-authentication, dribble, google-analytics, neon-db, next-js, node-js, postgress-sql, react-js, tailwind-css
- Language: TypeScript
- Homepage: https://she-cents.vercel.app
- Size: 2.97 MB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SheCents-Smart Money Moves for women by women
An fully responsive full stack application designed to educate women and others about finances through an engaging and gamified approach,
employing a straightforward and interactive user interface.
- #### [Video](https://docs.google.com/document/d/1LFZds8gGpxqvbzmUiJrv_Giuks4OkgAPU2yHxYEze0c/edit)
- #### [Flowcharts and User Journey](https://www.canva.com/design/DAGEXtrUxbY/LkioX4T4AaaQtTVLI7klLA/edit)
- #### [Presentation](https://drive.google.com/file/d/1jdFyVmk5WBM2DYLprDwpdnA7h8HNetPC/view?usp=sharing)
# Screenshots
### 1. Landing Page
**This is the landing page - the first appearance of our website to the user.**
### 2. Login/Signup
**Login and signup is done by clerk authentication**
**Security is provided with the help of Two Factor Authentication Process**
**Google Auth is also provided**
### 3. Courses
**Financial Modules are provided for various finance concepts**
**Each Module have 5 Lessons**
**Each Lesson have 8 Questions**
**On Choosing the wrong answer hearts decreases**
**The progress bar updates with each correct answer**
**Popups for leaving the question page**
**PopUp when you ran out of your hearts**
**On Completing the Lesson**
### 4. Leaderboard
**Compare your performance with other users**
Whatever progress is made is stored in the database and it displays the various player's performances along with their current quests
## Gamified Encouragements and Blankets
Inorder to boost user interests; the platform is gamefied with hearts and XPs.
Hearts act as a safety blanket for wrong answers, while XPs are the rewards to clearing a level.
In case one run out of Hearts:
**There are ways refill them -**
### 5. Quests
One of the ways to earn more hearts is through exhausting XPs. Quests are the best way to earn more XPs by finishing more lessons, and hence to Hearts.
### 6. Shop(Premium)
To get unlimited hearts is to enter into the Premium tier by a monthly subscription using payment gateway powered by Stripe.
## Doubts?
### 7. Connect
To ensure users gain more knowledge about the current money moves in case the lessons are not enough. A connect with financial experts will help clear any doubts and will provide more knowledge about the field.
### 8. Blogs
Any further doubts regarding the practicality of the strategy and learnings given by community leaders in connect or through course modules are users can read other users experience, and post theirs too.
### 9. Google Vertex AI Chatbot
**Askher.ai is a chatbot build with the help of Google vertex AI Agent builder. It provides answers to all the Finance related queries in a simplified manner**
# Local Setup
1. Clone the project into local device and open terminal inside the corresponding folder
2. Make sure NodeJS is already installed. If not, download from [here](https://nodejs.org/en/download/)
3. Run the following command in the terminal
> ` npm install `
4. Install all the dependencies
> ` npm install --legacy-peer-deps `
**The project has been successfully installed in the device.**
5. Create `.env` file in **root** directory.
6. Contents of `.env`:
```env
# .env
# disabled next.js telemetry
NEXT_TELEMETRY_DISABLED=1
# clerk auth keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
CLERK_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
# neon db uri
DATABASE_URL="postgresql://:@:/shecents?sslmode=require"
# stripe api key and webhook
STRIPE_API_SECRET_KEY=sk_test_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
STRIPE_WEBHOOK_SECRET=whsec_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
# public app url
NEXT_PUBLIC_APP_URL=http://localhost:3000
# clerk admin user id(s) separated by comma and space (, )
CLERK_ADMIN_IDS="user_xxxxxxxxxxxxxxxxxxxxxxxxxxxxx, user_xxxxxxxxxxxxxxxxxxxxxx"
```
7. Obtain Clerk Authentication Keys
1. **Source**: Clerk Dashboard or Settings Page
2. **Procedure**:
- Log in to your Clerk account.
- Navigate to the dashboard or settings page.
- Look for the section related to authentication keys.
- Copy the `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY` and `CLERK_SECRET_KEY` provided in that section.
8. Retrieve Neon Database URI
1. **Source**: Database Provider (e.g., Neon, PostgreSQL)
2. **Procedure**:
- Access your database provider's platform or configuration.
- Locate the database connection details.
- Replace ``, ``, ``, and `` placeholders in the URI with your actual database credentials.
- Ensure to include `?sslmode=require` at the end of the URI for SSL mode requirement.
9. Fetch Stripe API Key and Webhook Secret
1. **Source**: Stripe Dashboard
2. **Procedure**:
- Log in to your Stripe account.
- Navigate to the dashboard or API settings.
- Find the section related to API keys and webhook secrets.
- Copy the `STRIPE_API_SECRET_KEY` and `STRIPE_WEBHOOK_SECRET`.
10. Specify Public App URL
1. **Procedure**:
- Replace `http://localhost:3000` with the URL of your deployed application.
11. Identify Clerk Admin User IDs
1. **Source**: Clerk Dashboard or Settings Page
2. **Procedure**:
- Log in to your Clerk account.
- Navigate to the dashboard or settings page.
- Find the section related to admin user IDs.
- Copy the user IDs provided, ensuring they are separated by commas and spaces.
12. Save and Secure:
- Save the changes to the `.env.local` file.
13. Install Project Dependencies using `npm install --legacy-peer-deps` or `yarn install --legacy-peer-deps`.
14. Run the Seed Script:
In the same terminal, run the following command to execute the seed script:
```bash
npm run db:seed
```
This command uses `npm` to execute the Typescript file (`scripts/seed.ts`) and writes challenges data in database.
15. Verify Data in Database:
Once the script completes, check your database to ensure that the challenges data has been successfully seeded. Now push the data in the database
```bash
npm run db:push
```
16. Now app is fully configured 👍 and you can start using this app using either one of `npm run dev` or `yarn dev`.
**NOTE:** Please make sure to keep your API keys and configuration values secure and do not expose them publicly.
17. To run the project,run the command:
> ` npm run dev `
18. Now go to your default browser, and type the following command
> `http://localhost:3000/ `
*Steps 1-4 are needed for first-time installation only. Only steps 5 onwards will be needed while devolping the project.*
# Team Members
- #### [Ishpreet Kaur](https://github.com/Ishpreet-Kaur-Bedi)
- #### [Anushka Singh](https://github.com/singh-anushka)
- #### [Siddhi Agarwal](https://github.com/siddhi-agarwal25)
# Future Modifications
- **Google analytics can be used to track the number of users and helps to analyse the data**
- **Voice feature can be added in the answers to improve the interactivity and accessibility**
- **Admin Dashboard can be made for performing CRUD operations of the questions and challenges with simple UI**
- **Feedback section can be build which collects testimonials from the customers**