Coder Social home page Coder Social logo

3scorers's Introduction

3scorers is a fantasy football app built with ReactJS

Auto formatted with Prettier, linted with ESlint, tested with Jest/Enzyme and deployed with Vercel.๐ŸŽ—

App screenshot

3Scorers is a responsive reactJS web application that consumes private endpoints. It is designed primarily to accept inputs from customers and displays results fetched from different APIs.

What it does

The features implemented in this app were specified by the examiners. It is a dynamic web application that is responsive to different devices view ports. Response is gotten from private APIs fetched using JavaScript. This application accepts users details and authenticates them before access in given to private routes.

An improvement on this version of the application will leverage upon frameworks like BootStrap5 amongst others to make implementation and maintenance easier and faster.

Frameworks and Libraries used

The following frameworks were used for faster development of the web application:

  • ReactJs
  • React-router-dom v6

Challenges I faced

The examiners specially requested I use plain CSS without framework like BootStrap5 for this implementation. This increased the implementation time for this app. While implementing this web application, the other challenge I encountered was creating logics to fetch APIs. Although challenging, I found this exercise an interesting refresher on my JavaScript knowledge.

How to install and run the web application locally on your machine

To run the app locally, please follow the steps below:

  1. Git clone the repository on your terminal: git clone https://github.com/duokobia/3scorers.git

  2. cd 3scorers

  3. npm install

  4. npm start

That is it! The application should run on your local server on http://localhost:3000.

How to use the web application

The web application is intuitive and easy to navigate. From the landing page, click on any of the tabs in the navigation bar to go to their respective pages. This app authenticates users. Hence a login access is required for private routes.

You can switch to any of the public routes desired at anytime using the navigation tab.

Credits

This web application was solely implemented by me as a frontend developer assessment administered by XXXX XXX XXXXX. Product specification was given and I sourced the images used from upslash website. Attribution was done in the app's html and css pages these images were used. I drew inspiration from a couple of resources which includes:

websites:

vbloggers:

  • Youtube resources.

3scorers's People

Contributors

duokobia 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.