Blog Template:

Goals:

• Creact UI for full stack application.
• Experience making a blog application, allowing me to render mark down.
• Have a blog where I can actually show my articles on my domain.
• Experience using Zustand.
• Make login, register, forgot password functionality.
• Practice with react.

---

PERSONAL NOTES:

THIS PROJECT IS MADE WITH NEXT ITS MADE WITH VITE + REACTJS

• MongoDB has docs for typescript which is helpful: Typescript Guide
• Zustand has guides for react ts: Typescript Guide
• React-Markdown has guide for rendering markdown -> html react-markdown docs

Example for creating and using state for articles / Auth functionality.

  interface BearState {
    bears: number
    increase: (by: number) => void
  }

  const useBearStore = create<BearState>()((set) => ({
    bears: 0,
    increase: (by) => set((state) => ({ bears: state.bears + by })),
  }))

• Capture state at your highest component on the DOM tree, so when you route away the store does not get re-initialized. I could be wrong about this but that's the fix i had for issue with state not being persistant. No, I did not want to use local or sesion storage at the time.

TODO:

• Make the individual components { swiperComponent, articleasComponent, cardComponents }
• Add styling to the header component
• Make the side add portion of the blog
• Make sections on the main component to have the add section & articles section.
• Make the single article component & add edit for login.
• Add axios & pull data from public api.
• Add Zustand & pull data from the official blog api.
• Solidify the functionality for the blog login & registration.
• Find out why we cannot hold the login state in the store and have it on the entire app, updating state in wrong place in the DOM hierarchy
• Protect routes so use cannot access login without logging out.
• Add error messaging for API responses + ui actions.
• Add error handling.
• add markdown functionality.