Skip to content

Social Media Website with SPA (Single Page Application) Frontend made with Angular, TypeScript and REST server with Express.js and MongoDB, it consist of Guest part for unauthenticated users and User part for authenticated users. The authentication is made with JWT (JSON Web Token). Both made by me

Notifications You must be signed in to change notification settings

instamenta/NFT-Social-Trading-System

Repository files navigation

"Artificial Slime" is a SPA Website with a frontend and backend side both made by me!

Built With

  • Angular
  • TypeScript
  • RxJS
  • NodeJS
  • Express.js
  • MongoDB
  • JWT
  • Docker

The idea behind the website

Is to lead the users to interact with the NFT's, when hovering above the NFT it spins and expands which reveals the entire photo, also the data about it is not displayed unless you open the detais page, in order to create more immersive experience.

This project was generated with Angular CLI version 15.0.1.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Run node ./index.js for the backend server to start at port 3031.

"Artificial Slime" has the following pages:

Home

Animated welcoming page available for both Users and Guests with interactive part where
the most popular NFT's are displayed.

Front-Page

Catalog

The main part of the website from where both Users and Guest can see the list of every NFT
uploaded to the website. The main catalog page inclues, fully working search box which 
supplie you with data about search input matches.

Art-Page

Details

Shows the most important info about selected NFT. Guests can see how much likes and owns
it has as well as the price and the name of the person who uploaded it which leads to his
personal Profile page, Users can see this info too and gain the power to Own and Like. 
Liking NFT adds it to your  "Liked List' and owning NFT adds it to your "Owned List" but 
also gives you the ability to pick it as your profile picture to add a unique self expression 
customization. Registered users can leave comments under posts. Comments have working link to
the Commenter's profile as well as the date on which they were added. The Commenter canremove
it with the trashbin icon if wanted.

NFT-Page

NFT-Page-2

Comments

Profile

- Every User his own personal profile page, here Guest can see the User's name, 
description and picture as well as how much NFT's they own and like from where they
can click the link and see the list of all of the user's owned and liked NFT's, as
a User you can change your picture, description and username as long as they remain unique.

Profila-Page

Profile List

there both Users and Guests can see the list with every profile page, and access
their profile pages.

User-List-Page ercontent.com/98179343/216162625-97af782d-62e2-4615-82d6-64ab0c853783.PNG)

Create

Available only for Users after either Login or Register. This is from where you
can upload your own NFT. After uploading you are redirected to your newly created
details page of the NFT from where you can always edit it or delete it.  Every NFT 
you upload is automatically added your own list.

Create

Register

sends the data  to the server if the form is filled correctly. Checks if the username
and email are unique, and hashes your password, after that creates the user profile 
and stores the data in the MongoDB database. After successful register it redirects
you to your newly created user profile. 

Edit

This is where you can edit the uploaded by you NFT's to your liking.

Login

sends the data to the backend server where it checks for the email in the database,
if there is match takes the passwords and compares them. If the password match a JWT 
Cookie token is created and send to the Client for authorization this gives access to
the interactive part of the social media website.

Login-Page

Select Profile Picture

this is where Users can select their profile picture from list of all the uploaded
and owned NFT's by them.

Popular

Variation of the Catalog page accessible for both Users and Guests. The NFT's are
dispalyed in different order starting from the most expensive and popular.

Popuar-Page

Also every page except for the login in register there is animated list with all
all the subscribtion plans - "Bronze", "Silver" and "Gold" but for now there is no way to subscribe.

Subscribtion-List-Page

The website has two parts:

User

! After either Login or Register in the website you will be granted with access to:

  • your personal profile where you can customize your profile picture, description, username and email to your liking.
  • the ability like and own NFT's uploaded by other users and create and edit your own NFT's.
  • cookie used for authorization.
  • subscribe.

Guest

As a guest you are given a lot of freedom, you can visit the:

  • homepage
  • catalog ,
  • the most wanted list,
  • detail pages
  • users profiles

but you can't:

  • like
  • own
  • upload
  • edit
  • comment the NFT's.

Contact

Jan Milenkov - https://github.com/instamenta - [email protected]

Project Link - https://github.com/instamenta/NFT-Social-Trading-System

About

Social Media Website with SPA (Single Page Application) Frontend made with Angular, TypeScript and REST server with Express.js and MongoDB, it consist of Guest part for unauthenticated users and User part for authenticated users. The authentication is made with JWT (JSON Web Token). Both made by me

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published