fszpeiter / final-project-advanced-web-applications

Final project for advanced web applications.

Note

Lots of uncharted territory was stepped on to get the ideas running. At least for me during this project. Hope you like it, Professor Marks. 🤞

Final Project Advanced Web Applications: Beer Me Up!

Personal goal(s)

With this web application project, I wanted to explore front end concepts utilizing modern web programming languages, frameworks, and version control software like Git/GitHub. By creating a reasonably working web-application that has a clean and functional visual representation of a web-app, I could greatly increase my practical knowledge about the previously mentioned skills. I did not intend to tackle a lot regarding databases to be connected to this final app such I was focusing much more on the front-end side of things. But maybe try to connect both worlds of web development on a near future.

Code goal(s)/Ditto on SCOPE

Final project for advanced web applications. The idea of the project is to create a working beer stock management system named Beer Me Up! It´s a dynamic paged web application that has a hamburger menu for navigation and when the user inputs all the data about a particular beer, that beer is stored on a dynamic list on another page.

Name of the technologies I used (Languages, Frameworks, Libraries, Programs, Other people's code)

Markup language used: HTML5

Programming languages used: JavaScript

Frameworks: Bootstrap, JQuery

Programs: Visual Studio Code, Git/GitHub

PS: Icons for this README.md file taken from the website/source https://skillicons.dev/ 😀

Some valid considerations/improvements during the development of the project

During the development of the project, I encountered the following considerations/improvements for a nearby future/next web development project:

1. Further improvements to a more fluid user experience with modern web framework.
2. Fixed some front-end issues of user interface (separate beer list page/cleaner overall).
3. For a future project, maybe store the data utilizing a SQL database solution. I saved the data locally for this project.
4. Some input data validation on HTML when dealing with the beer data input got me thinking/was a hassle. HTML only has input type 'number'. It doesn´t accept decimal number as input. I searched for something called regex but seemed kind of confusing to implement. Sticked with input type text unfortunately. Will catch up with the concept later...
5. I was able to implement the buttons ‘Add Beer', 'Delete Last Added Beer' and 'Delete All Beers'. They´re all technically working but it would even greater if I was able to create a success message for each of the buttons. But they got a little buggy, for some reason.
6. Wasn´t able to finish implementing a proper success popup message to the user when he presses the ‘Add Beer', 'Delete Last Added Beer' and 'Delete All Beers'. I got the ‘Add Beer' button to work with a message at some point but it bugged later. Important point of learning for consideration.

Conclusions

While working on this project and during Advanced Web Application course I learned crucial web development concepts such as:

• Programming languages concepts and syntax.
• Web development framework concepts and syntax.
• User experience (UX).
• How to create a creative and proper README.md file (can´t deny it looks good and fun).
• Overall lots of webs development knowledge that will be useful for my future career as an I.T professional.

This was what I could improve since the last version of the project. Above, the final screenshot of the app interface:

Final interface/web application screenshots

Add Beers! page which you can add your beer data to your beer list (Located on the 'My beer list' which you access on the menu.)

My beer list! page which you can view all your added beer list information.

Thanks a lot for the valuable lessons and great academic term, Professor Marks. Hope to see you again/soon.