📌Link for project - https://ashutosh-pennypot-assignment.vercel.app
This project is a frontend demonstration of a sample blog app given as an assignment. The project uses techstack like HTML, CSS, JS(React). It also implements markdown parser to convert Markdown to regular HTML. I have used react-router-dom for routing through the application.
🎯The home page consists of content provided in the figma design doc. It consists of the exact replica of the figma design provided. I used Swipper for implementing the swipe feature on the home page. It is present in the code but due to lack of content(backend) i have disabled it. To show the write section i have added write button at the top in order to navigate ton write section. The footer section consists of working link for contact page.
🎯The project contains a write section (button in navbar) where you can write a new blog. I have implemented markdown parser here. The markdown parser along with markdown editor is implemented. It also contains buttons with having bold, italic and newline feature.
User also has option to upload image along with the text content after choosing category(tag) of the blog.
🎯This section consists of contact page. I tried to match the UI design that was provided to me. The details filled will be sent to a whatsapp number (8087572655). Just an additional functionality i added for fun 😉.
🎯HTML, CSS, TailwindCSS(CSS Framework), Javascript, Framework- React
🎯Imp React Libraries used - React-icons, react-router-dom, react-markdown
🎯Since direct links of figma design was not provided, i was unable to extract the logos and other images from the sample design. I was also unable to detect the font style due to the same issue.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
<<<<<<< HEAD
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
=======
3ab8985e63e4a8c8da8721a52737ad5a11250c2f