Table of Contents
CogBlog is a modern and fully fuctional blog for fictional characters who are also aspiring writters.
- Modern UI
- Extremely easy to use and intuitive
- Display a list of posts
- Display related posts
- Display a list of categories
- Display a list of post per category
- Display adjacent posts
- Allows you to comment on posts
- Teastable & Scalable
- Resposinve to different screen sizes
- moment.js
- React Icons
- html-react-parser
- next-themes
- react-multi-carousel
The app was initialised completely from scratch in order to ensure a smooth integration between React - Next - TypeScript - TailwindCSS. Also built with a GraphQL API to allow for a more dynamic and scalable experience which integrates perfectly with the GraphCMS API.
Components were built in a way that allows for a more dynamic and scalable experience which integrates perfectly with the GraphCMS API.
The UI is meant to be minimalistic yet engaging and intuitive. It was built using SASS for global styles and TailwindCSS for styling to allow great control and autonomy over the layout of the app and also the design and feel of all the elements within it.
all authors and posts are fictional and used for demo porpuses only
Setting up the Post markup in PostDetail was particularly challenging as looping through every single type of content to subsequently add its respective styling was needed in order to display it as semantically as possible. Used a combination of map, if and switch statements to achieve this.
Install the dependencies
npm install
# or
yarn add installRun the development server:
npm run dev
# or
yarn devBuild
npm run build
# or
yarn buildOpen http://localhost:3000 with your browser to see the result.