Code Monkey home page Code Monkey logo

market-ct's Introduction

Product-page-test

Tech Stack

  • HTML5
  • SCSS & Bulma
  • JavaScript (ES6)
  • React
    • React-apollo
  • GraphQL
  • Apollo-boost
  • Git & GitHub

Getting Started

If you would like to start this project in the Terminal, CD into the client directory. Once there, yarn to install dependencies. Then yarn start to get the project running. You can then navigate to http://localhost:3000 to view the project.

Release History

  • 1.0

Screenshots

Requested design

Screenshot of the requested design

My version

Screenshot of the app

Challenges and Improvements

Challenges

The main challenges I had on this project were...

  1. Getting
  2. Getting the test to register that it was able to add items to the basket. You're able to add the bulb to the basket and it is stored in state but the test doesn't seem to pass.
  3. Getting the correct colours. I got the official colour scheme from the Octopus Styleguide online but they didn't match correctly with the AppDesign image.

Improvements

The improvements I would like to make on this page would be the following...

  1. Getting the number on the basket to hide if the basket is empty.
  2. Improving the responsiveness of the image and a few elements on the page. I designed it mobile-first but found it challenging to get it to look as nice for the desktop.
  3. Making the page more compliant with the WCAG.
  4. Getting a better understanding of Jest and getting the tests to pass.

Wins

I really enjoyed this challenge. I had no prior experience with GraphQL so it was a great opportunity to learn how to use it. I was able to use GraphQL to request the data from the backend and get it to display on the page. I was happy (but not completely satisfied) with how the styling went, I was able to get it to look very similar to the AppDesignMobile image. I was really happy that I learnt how to use GraphQL as I have wanted to try it for some time, and now after using it I want to use on future projects too.

Author

Latch Jack - You can contact me via Twitter or via email.

Thank you for reading my repository! :)

market-ct's People

Watchers

Latch Jack 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.