Linh Huynh
DePaul Social
For this project, I worked with 7 other classmates for our Web Applications Development class. We were to design and development a single-page web applications (SPA) and with web services using Angular Cli.
Executive summary:
The project was to create any website from as long as we were using Angular and making the it SPA. We chose to create an application where DePaul students can interact with each other and find resources in one place. We decided to have the features of creating and joining a study group, finding and becoming a study partner, sell and buy textbooks, create and join meetups, and finding Demon discounts. As for the web services requirement that we had to have in the project, we decided to include Twitter. With Twitter, students can use #depaulsocial when they are tweeting about anything that is related to the site and have their tweet be shown on the site.
Process:
Once we knew what application we wanted to create, we came up with the features and started to outline what each feature would do. While brainstorming, we came up with the navigation for the site and a use-case diagram.
What we did next was create a mockup of the application using HTML and CSS. Since I was familiar with Bootstrap and have used it in the past, I created a navigation bar for the application where it can be used for all the pages. What we spent the most time on from here until the end of the project was the back-end and using Angular. With such a big team and each person having different skills and knowledge, we had to learn individually and communicate through Slack often to create the same applications and components for each feature. We used Github to share all or codes and make sure that each person is working on the newest version of the application.
Since each person did a mockup page for their feature, we only had to copy and paste in the codes into Angular. From there we changed according to what each feature have to do and how to present each feature where it is easily understood and used by the users. While working on Angular, we were also discussing how to implement our back-end, which was the database needed to hold all our user's information and data for each feature. We came up with using MySQL to host our DBMS but realized that we didn't need it. We got clarification that we should be calling the services and not building one for the database. Which was why we decided to use Firebase and their realtime database to store all our information.
At this point of the project, we started to split into 2 groups, the front-end and the back-end. We were tight on time with finishing the project and getting each feature to work. I was working on the front-end to make sure that each page looked similar and was SPA as well as screen responsive. After getting Firebase connected to the application, we had to start getting rid of hard coding data since we can use the realtime database and start implementing the Twitter API. As we implement each feature and get the page to look like form page or just a search bar, we found that swap textbook was hard to implement. Due to our time constraints, we had to get rid of this feature because it took more time to figure out how to implement it between 2 users. We were able to finish the application in time but there were features and little details that we wish we were able to perfect-it and make it look more responsive like other parts of the application.
Problem:
One problem that we had with this project was getting the application to be screen responsive. We weren't sure if it was because we were doing it in Angular, but most of the CSS styles we tried did not make the pages screen responsive. I had to hard code some styles based on my screen size and use some codes that I found online to make it look somewhat centered and spaced evenly on other screens. Another problem we had when doing the project was getting swap textbook to work. We had a basic idea of how it would work, as seen below, and what information we needed to connect 2 users, but it took too much time to be implemented. We had to think about how the users would contact each other, how the textbook would disappear, and if it would appear in the sell section page. The last problem we had was that the Twitter feature. What is wrong with it is that tweets would disappear after about 2 weeks. Since we designed it to only show recent tweets from users, there's a time limit where we couldn't figure out how to change. This features work, but we would need to constantly tweet with #depaulsocial to make sure that there are tweets at the bottom of the page.
Reflection:
Working on this website was a good opportunity for me to better my HTML, CSS, Bootstrap skills and learn about Angular. Not only did this contribute to my design skills but also development skills in making the application, both front-end and back-end. Overall this project was fun and challenging in the sense that we had to work in a large group and learning new concepts as we build the application. After this project, I wished we had more time as a team to work more on the project and to fix the little details and problems that we had.