Event App

Type: Website

Tools used: Angular, nodejs, ASP.NET, Git, Cache, Docker, Cloudinary, Typescript, bootstrap

Link: https://dating-app-practice.herokuapp.com/

Github: https://github.com/Shadow3197/ASPNET-app

Requirements:

  • Allow users to register and login.
  • Ability to search for other member and like them.
  • A Role system where an admin manages what photos go to the site.
  • Ability to message other users in real-time.
  • Upload Photos to a server and display them.

Project Overview

Event App is a dating web app where users can search for other members to be matched with, send messages, or post photos monitored through an admin account.

The Approach

Starting with the layout of the web app I needed an authentication page, a match page, a personal page, a message page, and a like page. As a first step, I created a database to safely store the user passwords using hashing and salting (later I will use ASP.NET identity to make the system even more secure), set up basic authentication, and used Postman to test the database and API. Then used DTOs in order to receive the properties of the body in the requests. Added basic validation, endpoints, token service, and authentication middleware.

On the client-side, I created a navbar, a form module to allow the client to log in, and a persisting data module to keep the client logged in. Next, I built a home page to allow users to register. Added routing to navigate between pages, a bootstrap theme for the UI, notification messages for invalid login, and added angular guards to prevent users from accessing pages they are not yet permitted to go into. Implemented error handling on the API and client. Further enhanced functionality using entity framework relationships to add relationships in the database between user and photos collection. Added AutoMapper so the repository can handle the mapping inside the controllers.

After that, I developed the member interface, service, and card to display the users to the site. I also added a detail page to show the user information, as well as provided a photo gallery by uploading photos to a server with Cloudinary. The next step was to implement persistence when updating resources in the API to allow users to update their information, added loading indicators to show feedback, and added caching for faster load times. Added validation using reactive forms. Filtering, sorting, and pagination was used to make finding matches easier for users. Implemented the like and block functionality so users can quickly return to a favorited user or block a user from messaging them. The next feature was the message feature, with an inbox, outbox, and unread messages. Members’ messages will be visible through a tab under their profile page, whereas their inbox, outbox, and new messages will be shown on separate pages.

At last, the code was refactored to use ASP.NET identity, which increased security to the website, as well as new roles, including the user manager, the sign-in manager, and the role manager, where admin and moderators are added. Lastly, I added SignalR, which will provide real-time functionality to the messages and show which users are online and when they last logged on as well as notify users when they receive a new message.