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

• Flowcharts and User Journey

• Presentation

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
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

# 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://<user>:<password>@<host>:<post>/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 <user>, <password>, <host>, and <port> 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

11. Procedure:

    • Replace http://localhost:3000 with the URL of your deployed application.

12. Identify Clerk Admin User IDs

13. Source: Clerk Dashboard or Settings Page

14. 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.

15. Save and Secure:

    • Save the changes to the .env.local file.

16. Install Project Dependencies using npm install --legacy-peer-deps or yarn install --legacy-peer-deps.

17. Run the Seed Script:

In the same terminal, run the following command to execute the seed script:

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

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

• Anushka Singh

• Siddhi Agarwal

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