Web-site Credentials

• Username = admin
• Password = janhack

Budget Buddies

Budget Buddies is your one stop shop to achieving savings goals, we provide a singular destination for you to add savings goals, track their progress, get tips to manage your finances and turn savings into a social experience!

We want to make it simple and easy for you to benefit from the 50,30,20 savings technique. we want to colour code your needs, wants and savings into a handy chart so you can see where best to cut back and get those dreams!

Features

Existing Features

• Navigation Bar

  • Made in Django This allows the user to access all areas of the website

• Register and Login Pages

  • The user can register to have an account they can use to store their data and access it later and any time on any device

• Home/Landing Page

  • The main page features a prominent hero carousel
  • Below that is further information on what Budget Buddies do and why to register

• About Page

  • This section shows Budget Buddies mission
  • This prominently displays all our features

• Tracking

  • This section allows the user to add a goal and keep it updated
  • This shows the users goals and how far along they have come to acheiving them

• Contact

  • A simple contact form using emailJS functionality that delivers a success or fail message to the user when they submit

• The Footer

  • The footer section includes links to the relevant social media sites for Budget Buddies. The links will open to a new tab to allow easy navigation for the user.
  • The footer is valuable to the user as it encourages them to keep connected via social media

Deployment

• The site was deployed to Heroku app

The live link can be found HERE

Wireframes

• Wireframes can be found HERE

Technologies Used

Languages

• HTML
  • Page markup.
• CSS
  • Styling.
• Javascript
  • Running functions for interactive components, AJAX, etc.

Frameworks

• Bootstrap 5
  • Used for basic styles and outline.
• Django
  • Used to rapidly build the website with models

Libraries

• JQuery
  • Animations and click functions.
• Google Fonts
  • Font Styles.
• Fontawesome
  • Used for icons

APIs

• EmailJS
  • EmailAPI used for having a contact page with no backend

Platforms

• Github
  • Storing code remotely and deployment.
• Gitpod
  • IDE for project development.

Other Tools

• Balsamiq
  • To create wireframes.

Credits

Content

• The text for the Home page was taken from Wikipedia Article A
• Instructions on how to implement form validation on the Sign Up page was taken from Specific YouTube Tutorial
• The icons in the footer were taken from Font Awesome

Media

• Images were sourced from Unsplash
• AI images generated using Microsoft Designer