/Blog-with-API

Primary LanguageJavaScriptMIT LicenseMIT

#html #css #js #dom #JSON-server #JSON

 

Blog chain logo

 

Blog CHAIN

A fast, simple, elegant & powerful blog powered by HTML, CSS and JS Vanilla.

According to a recent survey, blogs have ranked as the third most trustworthy source of information, following only friends and family. That's right — bloggers are trusted more than celebrities, journalists, brands, and politicians.

With this blog we will get people to fall in love with it. Well, just as your website homepage is like the front door to your business, our blog's design is the front door of ourselves.

With an elegant design, and an organized structure, we have created this fashionable blog to read about any topics you want.

 

Preview

image

 

Gold sponsors 🥇❤️

 

Table of contents

Getting started

First of all, you must launch the local API server created with JSON server to be able to fetch the data to the blog web page.

npm run server

Also when doing requests, it's good to know that:

  • If you make POST, PUT, PATCH or DELETE requests, changes will be automatically and safely saved to db.json using lowdb.
  • Your request body JSON should be object enclosed, just like the GET output. (for example {"name": "Foobar"})
  • Id values are not mutable. Any id value in the body of your PUT or PATCH request will be ignored. Only a value set in a POST request will be respected, but only if not already taken.
  • A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body. Otherwise it will return a 2XX status code, but without changes being made to the data.

 

What can you do in blog chain?

 

  • Read articles about whatever topic you want.
  • Modify articles clicking in the edit button of the desired article card.
  • Remove articles clicking in the delete button of the desired article card.

 

Roadmap

 

Project Organization

 

We started designing the structure of the blog with its differents html tags and giving it classes and ids.

Main structure

Info modal structure

Edit modal structure

 

Responsive

 

This blog web page is adapted for all type of devices.

  • Small devices (mobiles 360px and up)
  • Medium devices (landscape tablets, 768px and up) */
  • Large devices (laptops/desktops, 992px and up) */
  • Extra large devices (large laptops and desktops, 1200px and up) */

image

 

Technologies

  • HTML HTML Icon
  • CSS CSS Icon
  • JAVASCRIPT VANILLA JS Icon
  • JSON SERVER
  • BOOTSTRAP 5 BT Icon

 

Team

 

Links

Video

Video Demo

 

Third-party tools

 

Linkedin

linkedin Ivan Escribano

linkedin Alicia Cembranos