Modern Magic

Currently, Modern Magic is a social media website that allows users to create events/activities, join and chat about activities, upload photos to their user profile, follow other users, and view the activities and follower/followings of users.

The eventual goal of this app is to create a Magic: the Gathering strategic deck building website. The components in the playtest folder of the client-app folder give a sample of what the features to playtest a deck will look like.

Due to the extra time it takes to develop in C#/ASP.NET, I have decided to first create an implementation of this goal using Node.js/Express for the backend. See https://github.com/codewithcarlos/mvp for progress updates on the Node app. Once I have completed a minimum viable product in Node, I plan on circling back to this project as it is already deployed and has some nice social media features that may come in handy.

Technologies Used

Front-End	Back-End	Deployment	APIs

Front-End

• A combination of Semantic UI React and custom-built React components were used to display the UI. Also implemented media-responsive styling for all components.
• Routes and user flow were managed with React-Router. MobX was used for state management and TypeScript for static type-checking.
• React Dropzone and React Cropper were used for user profile image uploads. React Final Form was used for creating new activities.

Back-End

• Website was built using clean architectural design, ASP.NET Core MVC, and the CQRS + Mediator pattern.
• Code First Migrations with LINQ and Entity Framework were used to seed MySQL database.
• Obtained an A rating from SecurityHeaders site scan by adding Headers/features that enforce the use of HTTPS and help protect against things such as cross site scripting attacks, clickjacking, MIME-sniffing, etc.
• The app leverages JSON Web Tokens (JWT) as the URL-safe means of identifying a user.

Deployment and APIs

• Incorporated Cloudinary as the cloud-based image platform to persist photos uploaded by users.
• SignalR was used for real-time chatting on events/activities.
• Published the app to Linux (Ubuntu server).
• Purchase custom domain name and configured Apache to use an HTTPS SSL certificate.