siren-blog-app

This website is built mainly for the purpose of blogging on various topics such as fitness, food, sports and such.. This website is build using React, with utlizing the robust capabilities of CSS preprocessor called SASS more specifically SCSS. This project has extensively utilized the core concepts of React such as props( i.e, passing down data from parent components to children components ), functional components and their respective hooks such as useState(), which is used to control and manage state changes of elements on a website and the useParams() hook provided by the React routing library react-router-dom, which helps in matching the URL with a specific data. All of the content being rendered on the screen is being pulled from the JSON files, which contains all the data.

What I learnt?

Using react-routing with the help of react router library It's syntax looks something like this:

<BrowserRouter>
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} /> // paths and their respective components on that URL
        <Route path="blogs" element={<Blogs />} />
        <Route path="contact" element={<Contact />} />
        <Route path="*" element={<NoPage />} /> // handling error 404 page
      </Route>
    </Routes>
  </BrowserRouter>

Usage of hooks like useState() and useParams() It's syntax looks something like this:

i) useState()

 let [number, setNumber] = useState(0) //initialized number variable with value 0 and it'll be changed using the setNumber method.

ii) useParams()

let {id} = useParams() // id will contain the link that you've clicked on and we can use it to render content bound to a paricular link

Desktop Design

Mobile Design

Live URL

https://siren-blog-app.netlify.app/

Resources used