Full Stack Web Develpment Project.

This is a Full Stack Web Development milestone project. The site is device friendly and it implements a CRUD functionality along with stripe payment system and with a JavaScript video slider/swiper.

• The working website can be found here.

Test user:

In order to test the site functionality without registering a new user there is a built in user to use it for.
Username: testme
Password: verifyme

User stories:

• First time visitor.

  1. Easily and quikly understand what is the site about.
  2. Show that the site is based on private experience.
  3. Video examples.
  4. Options to access content.
  5. FAQ.
  6. Mobile friendly.

• Returning visitor.

  1. Contact to support in case of additional questions.
  2. Options of the subscription plane.
  3. Make subscription.

• User of the site

  1. My profile page.
  2. Sorted videos by categories and subcategories.
  3. Video slider to navigate through videos.
  4. Search field.
  5. See upcomming events.
  6. Make likes and add a video in to the My List.
  7. Manage account.

The site was sketched on balsamiq and designed in to the Adobe Photoshop CC. During development process the design of the site was refined. Files of sketches and designs can be found end of this page.

Technologies:

• Balsamiq - Sketches.
• Adobe Photoshop CC - Site design.
• Bootstrap 4.5.3 - site structure and site responsiveness.
• CSS/CSS3 - styles.
• JavaScript - email sending's animation, loading and other thing.
• JavaScript OOP - vidoe slider.
• Django framework - Site functionalities.
• Django-allauth - User stories.
• Python - Programming language.
• Git - Version control.
• GitHub - Files repository.
• Heroku - Site deployment.
• PostgreSQL - Database.
• Amazon S3 - Storing images and static files.
• Stripe - Subscription system.

Stripe test credit card details:

In order to make subscription on this site for testing please use the following credit card details:
Card number: 4242 4242 4242 4242 
Exmeration date: 04/24
Security code: 242 
Postcode: 42424

Testing.

This site was tested in all modern browsers except Internet Explorer. Site responsivnes was tested with google chrome's web development tool.

Sketches.

Desktops	Tablets	Mobiles
Home page not logged in	Home page not logged in	Home page not logged in
Home page logged in	Home page logged in	Home page logged in
Videos page	Videos page	Videos page
Subscription page	Subscription page	Subscription page
Single video page	Single video page	Single video page
Category page	Category page	Category page
Registration page	Registration page	Registration page
User profile page	User profile page	User profile page
Playlists page	Playlists page	Playlists page
Events page	Events page	Events page
Contact page	Contact page	Contact page
Account page	Account page	Account page
FAQ page	FAQ page	FAQ page
Authentication page	Authentication page	Authentication page

Design.

Desktops	Mobiles
Home page not logged in	Home page not logged in
Home page logged in	Home page logged in
Videos page	Videos page
Subscription page	Subscription page
Single video page	Single video page
Category page	Category page
Registration page	Registration page
User profile page	User profile page
Playlists page	Playlists page
---	Events page
Contact page	Contact page
Account page	Account page
FAQ page	FAQ page
Authentication page	Authentication page