Giter VIP home page Giter VIP logo

blog-app's Introduction

blog-app

For Machine Test 1

Please check master for first submission at 6PM on 12th March 2022, revision for my changes to the code if I had a few more hours.

I have also made a list of improvements which I have noticed in my own code and would like to fix. Thet can be seen on the Issues tab.

Instructions to open project:

Please download as a zip and extract, or directly clone either git branch to your system.

please run npm i followed by npm start to view the code in action.

Notable features in revision:

  • I have made all the components independent and reused the card component in both the Todos and Blog section after making it customisable using props.
  • Have created a theme json which changes all the colours of the entire project using keywords primary, secondary or accent
  • Made a fully independent navbar which can accept a list of strings and show them in the navbar, with the colours of choice as well.
  • Used React Query so that data is cached and there is proper validation
  • Used only functional programming and hooks (useState, useEffect) to make code cleaner and simpler
  • Routing (which was in master as well) using React Router

blog-app's People

Contributors

anshullaikar avatar

Stargazers

 avatar

Watchers

 avatar

blog-app's Issues

Fixes to reach V1 for Blog

UI (lowest priority)

  • Responsive
  • Add accent colour
  • Give it a theme / personal touch
  • center the cards
  • Home page should say Welcome! and then smart one liner with blog and todos section.

UX (medium priority)

  • Add number of comments to each Blog Post card
  • Instead of email add a contact button which opens your native email app
  • Written by 1 should instead be a random profile pic (use API) and should go to their profile section where you can see all their posts
  • Filter should be there on top to filter by Author

API related high priority):

  • Use React Query
  • Loading animation (cards with wireframe like content)
  • Error handling

Code related:

  • Use functional components and hooks / remove all class based features
  • High focus on reusability
  • Used styled components for UI
  • custom hook for API calls to improve reusability

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.