We also had to figure out how to send the relevant data to the views form the server to make code reusable across different views. This required us to get creative in how we created that content, using Pug mixins, various layouts, and a whole lot of CSS code. The most challenging aspect of the front end of Tappdin was probably the sheer number of different views that we had to create, and how to serve content dynamically into them. P It looks like there aren't any reviews yet Link ( rel= "stylesheet" type= "text/css" href= "/styles/recent-activity.css" )ĭiv #checkin_container if checkins.
We paired this with a component that took an array of checkin objects to dynamically render the associated checkins in its context (checkins by user on homepage, checkins about brewery on brewery page, etc.) Dynamic Templating with Pugįor instance, we created a Pug mixin (the Pug equivalent of a JS function) to create relevant checkins across different views. We made extensive use of the Pug templating engine to render dynamic content and create reusable HTML components that we were able to deploy across multiple views on the site. There are actually only 6 lines of frontend Javascript, which were used for the 'Demo User' login button! We also seeded the database using beer and brewery information from BreweryDB API.Īs Tappdin, is a quite straightforward CRUD app with simple interactivity, we were able to build out the front end without any AJAX and minimal client-side Javascript. To connect our backend to the postgres database we implemented the Sequelize ORM. The backend uses a suite of libraries for application security and building its API routes (discussed further in the backend section below). We used vanilla Javascript for interactivity and standard CSS for styling. The front end uses the Pug templating engine to render views from the frontend server. We used a PostgreSQL (postgres) database to store all application data. Tappdin was built using separate front and back end servers that communicate via RESTful APIs.īoth front and backend servers are built using the Express NodeJS framework. Application Architecture and Technologies Used
Tappdin currently possesses a database of 500 beers from almost 20 breweries that users can explore and review, which we call checkins to maintain consistency with the original Untappd app. It allows users to create accounts, post and delete checkins of beers, view the checkins of other users, and discover new beers. Tappdin is a beer tracking app modeled on Untappd. Application Architecture and Technologies Used.By Johnny Bui (front-end lead) Giancarlo Sanchez (backend lead), and Ben Perlmutter (project manager)
0 kommentar(er)
