Comic Up! Application
A web Application that allows users to sort through their
favorite Marvel heroes and villains add the heroes or villains to their personal team list.
This project was done as a group, myself with one other member.
To make collaborating on the
application smoother, the work was initially split into a front, and back end.
I ended up doing the front end, to start.
- Reasoning behind displaying this example of my work.
- 1. Team Collaboration
- 2. Use of source control
- 3. Visually Appealing
Navigating to the site places you on the register screen to start.
Each of the web pages are looking for a user cookie to be set.
This is so that users can not navigate inside the site without being logged in.
If a user tries to go to the dashboard before logging in they will be returned to the login page.
Once a user is logged into the site there is 5 key pages on the navigation.
- User - Account
- Dashboard
- Browse
- My Team
- Random
Upon user logging in or registering they are navigated to the user dashboard.
The dashboard consists of two main components,
on the left there is a time line that holds 4 comics and descriptions for a to do reading list.
On the right is the hero of the day which is a random hero from the users team list.
This also gives a description of the hero below their image.
Navigated to the browse page, this page is where the bulk of the work takes place.
Starting out the 6 possible characters are loaded in as Marvel's API default list return.
Users can then proceed to page through as is or, users can search for the character they want.
Now that a User's added characters to their team when navigating to the team page they will see
their own team populated their. If the team is not fully populated it will just show the characters currently added.
Further more when there is no characters on a team it will show the users team as empty.
The bottom link on the navigation is the random page, and if you haven't guessed by now it is exactly what it sounds like...
R A N D O M.
Split into two parts one, holds a randomly comic returned from the API. The other holds a random character returned from the API.
It's purpose? To be random !
Jumping back up to the top of the navigation, under the user-name chevron, there is the option to go to the account page, or logout.
On the account page, there is the tabs to go to and a button to delete the account. Selecting a tab changes what is shown on the right.
Mostly its just different chunks of texts about privacy policy's and the users account, the important one is change password.
This is where a user can change there password, they must type it twice to confirm and, be a minimum of 4 characters. Passwords
are then encrypted (sha256) and stored in the database.
If a user wants to delete their account, they can. They're first prompted to reconsider, but if they really want to go who am I to stop them?
Oh yeah the programmer ! So based on best practices deletions are done using a soft delete. Since that record stays in the database,
any new users who register are prevented from using the same user-name.
Finally to get even more data from the API, there is a character details page that gives a description of the character,
who they are how they became, ect. also shown is the number of comic appearances !
-
Previous Example
-
Next Example
