Our First Project
Hi. Welcome to the first post by Team Lambda. In this post, we will walk you through how we built the front and back ends of the login page for our Lambda app. Here is a brief overview of what we did. 1\. Designed the login page as well as a home page to be shown after login and register page for new users who don't have accounts 2\. Designed UX prototype (You can take a look at it here: https://www.figma.com/proto/B4wFtyRVtqZn0ZcM8BlZSB/Lambda-Login-Page?node-id=35%3A20&scaling=scale-down) 3\. Implemented the front end using HTML, CSS, and Bootstrap. 4\. Implemented back end using PHP. 5\. Handled control using GIT. 5\. Deployed to beta on 000webhostapp 6\. Ran some UX tests, fixed bugs, and minor design issues in CSS 7\. Finally redeployed to full production on 000webhostapp. **DESIGN** We started off by building a couple of mockups for the app using Figma and then refactored the User Interface for the app a couple of times until we were satisfied with the alignment of elements on the various pages, the typography, placement of the call to action buttons, and the colors and the logo for the brand. While doing this, we made sure to group the elements within the Figma frames into properly nested components so proper CSS positioning and inheritance of styles would be taken account by Figma when generating the CSS for our mockups. Finally, the mockups were sent to the front end developers who immediately started implementing the code while the designers finished up the prototype of the site (You can take a look at it here: https://www.figma.com/proto/B4wFtyRVtqZn0ZcM8BlZSB/Lambda-Login-Page?node-id=35%3A20&scaling=scale-down). **FRONT END DEVELOPMENT** This part wasn't too difficult thanks to the CSS generated by Figma during the design process. HTML5 and CSS were used to implement the designed mock-ups and minimal Bootstrap was used to implement the responsiveness of pages of our app. Also, HTML5 was set up to validate user input before they get sent to the backend and we made sure to add the scripts required for the interactive bootstrap components towards the end of the body tag so the load time of the app is reduced by loading them last. Finally, the implemented UI was passed down to the back end developers to add the authentication which they had already started implementing. **BACK END DEVELOPMENT** With the aid of the frontend developers, we were able to begin our end of the task. We used a database to store the details of registered users. After settling that, we decided to use PHP programming language to work on the functionality of the pages because of the kind of developers we had in the team. First we created a connection to the database, then set it to take users to the Homepage by default if they were already logged in else, it would require them to register. During registration, we collected the data from the form and stored it in the database while making sure that there was no duplicate record. Then the user is redirected to the login page so they get some practice using their login details one more time and get a feel for what the login page looks like. After logging in, the user is then redirected to the Homepage. **DEPLOYMENT** When the back end had implemented, we deployed the app on 000webhost ran some tests to make sure the functionality of the app was implemented, smashed some serious bugs, and fixed some UI/UX errors then finally redeployed the app to production. So, it was a huge learning process for us working on this project and we hope to write more about our journey into web development. It was a challenge at every stage but as a team we made it work. Team Lambda.