Using TypeScript, ReactJS, NextJS, Node.JS, TailwindCSS, Devicon, & Shadcn for Front-End Development.
Using Appwrite for databases.
Using Plaid & Dwolla for banking verification.
Using Sentry for user testing & quality control.
First, pull the repository: https://github.com/Admeen3581/Youngin_Budgeting/
Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
*Note: Once you get the "Link your account page" after signup, it will ask for a bank. You can click any of them, which will take you to the SandBox institution (First Platypus Bank) I have setup. Use the login information below:
Username: user_good
Password: pass_good
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
I wanted to learn a vast range of applicable skills instead of creating terminal games and solving LeetCode problems. This application inspired by JSM (JavaScript Mastery) and seemed right up my alley. I have dipped my toes into web development before, but React was the first new library I had to learn. Basically an entirely new skill from scratch. Soon followed other front-end libraries/languages such as Typescript and Shadcn. Then came the back-end which honestly was not too bad. Granted I used Appwrite instead of SQL or other popular databases. The banking authentication was definitely the most difficult part. Huge hurdles to hop over like the userId not being able to be read. Overall I enjoyed this project and to taught me lots. Full list bulleted below:
🔹 Using a front-end framework (React w/ NextJS)
🔹 Installing dependences (Node.Js)
🔹 Proper git etiquette
🔹 Using keys to interact with other applications
🔹 Developing using Third-Party sandbox environments to authenticate banking information privately & securely.
🔹 Testing code with Sentry for realtime debugging and error catching
🔹 Creating users with unique properties, then using said properties to re-authenticate them back into the site.
JavaScript Mastery:
He gave me the inspirational piece for this project. While both may look similar, the code for them both does have quite a few differences. I added my own elements, removed things I did not find necessary, and did not directly follow the tutorial word-for-word. I would code and then if I got stuck see what JSM did.
https://www.youtube.com/channel/UCmXmlB4-HJytD7wek0Uo97A
https://github.com/adrianhajdin/banking
