meet cyclists landing page

Deployed on Heroku

Overview
Description:
Social connection app for cyclists with 1-on-1 live chat, photo upload, admin/moderator roles, and filtering/sorting/paging of data.
Based on a dating app built alongside Udemy's online course on how to build a web app using ASP.NET Core and Angular. It incorporates many of the same designs, components, and core features that the Udemy course taught, but I took the theme and styling in a bit of a different direction and implemented a few additional features afterwards. These additional features include:
1. A separate consolidated chat page (e.g. Facebook Messenger, Apple Messages, etc.) with infinite scrolling (API call to load messages when the user scrolls to the top of the chat box) and dynamic name filtering when searching for message threads by username (by using a custom-built Angular pipe).
2. Changing passwords and deleting accounts using ASP.NET Identity.
3. Additional filtering and search criteria for the "Discover" page related to the cycling theme. For example, I added options for preferred cycling surface, cycling frequency, and skill level. I also added a State/City search using a custom JSON file. When searching for users, the City field will dynamically updates based on what the users selects for the State.
4. Responsive styling using ngx-bootstrap, including the use of side navigation for pages that have search and filters. This gives those pages a bit of a cleaner dashboard design.
Complete Summary of Features:
1. Authentication and authorization using JSON Web Tokens (JWT) and ASP.NET Identity, including deleting accounts and changing passwords. The JWT payload returned from the server contains important user information, including the user's roles (Admin, Moderator, or Member), which are stored in the browser's local storage.
2. SignalR for 1-on-1 live chatting, real-time notifications, and online presence.
3. Consolidated chat page (resembling Facebook Messenger, Apple Messages, etc.) with the user list on the left and the chat box on the right. Chat box includes infinite scrolling (loads an initial set of messages and then makes API calls as the user scrolls up to fetch past messages).
4. Custom error handling using exception-handling middleware on the server and an error interceptor client-side.
5. A "Discover" page that filters, sorts, paginates, and caches other users, based on the user's search criteria.
6. Photo upload to a third-party cloud platform (Cloudinary).
7. Integration of third party Angular components and modules, including ngx-toastr, ngx-bootstrap, ngx-gallery, ng2-file-upload, and ngx-timeago.
8. "Admin" and "Moderator" roles (via ASP.NET Identity). Users with the "Admin" role can edit user roles, delete users, and moderate uploaded photos. Users with the "Moderator" role can only moderate uploaded photos.
View Application:
Video Demo

Video highlighting basic features and functionality. Turn on subtitles/closed captions for a guided walk-through.

Home Page - Unread, Inbox, and Outbox Containers
meet cyclists home page with unread, inbox, and outbox

Home page that acts as the message inbox. Different tabs for Unread, Inbox, and Outbox. Users can also delete their messages on this page (but messages only delete from the DB if both sender and recipient delete a message).

Discover Cyclists
meet cyclists discover page

Discover page where users can search for other cyclists. Includes pagination with caching.
Also has a custom made "State" selector that dynamically generates the "City" drop-down.

Consolidated Chat Page
Consolidated chat page with infinite scrolling (load more messages from the API as the user scrolls up)

Consolidated chat page (involves a query to get message group keys that include the user's unique username) that has "infinite scrolling" (load a small batch of messages on page load and only load more messages from the server when the user scrolls to the top of the chat box). Also includes dynamic name filtering using a custom Angular pipe (filter-chat.pipe.ts).

Photo Editor

Photo upload page for a user's profile photos. Users can drag and drop photos for upload, set "Main" photos, or delete photos. Newly uploaded photos are marked for moderator approval. Users with "Moderator" privileges can approve or reject photos.

Admin: Manage Users

Users with the "Admin" role can edit user roles and delete users. They can also manage photos.
Users with the "Moderator" role can only access the "Photo management" tab (the "User management" tab will be unavailable). Includes the ability to search by username and filter by roles.

Admin/Moderator: Manage Photos

Users with the "Moderator" role can approve or reject uploaded photos within the "Photo Management" tab.
With the additional filtering on the page, a potential use-case could be dividing up photo management responsibilities among moderators in different states.

​​​​​​​View the Source Code on GitHub

You may also like

Back to Top