Giter VIP home page Giter VIP logo

p4_freelancersourcingplatform's Introduction

FishEye | Freelancer Sourcing Platform

Developed Skills

  • Manage website events
  • Develop a modular app with design patterns
  • Write maintainable JavaScript code
  • Ensure the accessibility of a website

Description

FishEye is a website for freelance photographers to show off their best work.

Aim of the project was to create a prototype for the website with a homepage and individual pages for every photographer. In addition to that, the the site should be accessible to visually impaired users and users should be able to navigate the site using keyboard controls.A JSON to mimic the data structure on the database, as well as images and logo were provided.

Objectives

CONTENT

  1. Homepage

    • Lists all the photographers with their name, tagline, location, price/hour, tags, and a thumbnail image of their choice
    • Clicking on a tag on the navigation bar filters the list of photographers to only show those that correspond to that tag.
    • photographer’s thumbnail is clickable, and redirects user to the photographer's page.
  2. Photographer pages (one for each sample photographer, 6 in total) created dynamically through JSON data

    • Shows a gallery of the photographer’s work
      • Photographers can show both photos and videos (media items).
      • In the case of videos, show a thumbnail image in the gallery.
    • Each media item includes the title, date (as attribute in the markup), price, and the number of likes.
      • Like icon is clickable, and when user clicks, increment number of likes
      • The total number of likes should be counted and added to the total on the photographer’s profile.
    • The media items can be sorted by popularity, date, or title.
    • When the user clicks on a media item, show media item in a lightbox.
      • When showing the lightbox, implement x (close) button in the corner to close the window.
      • Show navigation buttons on the side to switch from media item to media item (users can click on these buttons to navigate).
      • The arrow keys also navigate between the media items.
    • Show a contact button on photographer page
      • The contact form is a modal containing a form that is shown on top of the rest.
      • It includes fields for the name, email, and message.
      • Print content of the input fields to the console log.

ACCESSIBILITY

  • Use of “semantic” HTML elements
  • Added ARIA attributes to all custom elements
  • Code must pass the AChecker tests with no known problems (and be compliant with WCAG).
  • All event handling (e.g., clicks and keyboard presses) should be set up
  • Test with screen reader
  • Adding a JSON field for the alt description for each image

Requirements

  • must pass W3C validation for HTML and CSS without errors
  • must be responsive for mobile and desktop, no tablet design needed
  • use ESLint
  • apply object-oriented programming
  • use factory method pattern

Challenges & Achievements

  • bild custom drop down menu and apply ARIA attributes
  • implement factory method pattern
  • use Babel and set up webpack
  • use of asynchronous programming to mimick server request

Demo

Link to website

p4_freelancersourcingplatform's People

Contributors

christinebogdan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.