https://github.com/aliasghar-bagheri/nextjs-blog-website

A blog website for sharing and managing users, posts, news, comments, podcasts, resources, etc.
https://github.com/aliasghar-bagheri/nextjs-blog-website

appwrite nextjs14 reactjs tailwindcss

Last synced: 15 days ago
JSON representation

A blog website for sharing and managing users, posts, news, comments, podcasts, resources, etc.

• Host: GitHub
• URL: https://github.com/aliasghar-bagheri/nextjs-blog-website
• Owner: aliasghar-bagheri
• Created: 2024-11-04T15:15:56.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-01-12T07:13:58.000Z (16 days ago)
• Last Synced: 2025-01-12T08:23:09.264Z (16 days ago)
• Topics: appwrite, nextjs14, reactjs, tailwindcss
• Language: TypeScript
• Homepage:
• Size: 1.31 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 

    
Blog Website


  


     
A blog website for sharing and managing users, posts, news, comments, podcasts, resources, etc.

  


  


    

      

    

    

      

    

    

      

    

    

    

      

    

    

      

    

    

      

    

  



## 📝Project Description

This project is a space for those who want to share information. For example what news there is or podcasts to listen to as well as writing posts and many other things. This project includes two roles of admin and user, the panels of each of which have been developed separately so that they can be developed well.

## 🌐 Functionality

The functionality of this project includes:

- User authentication and authorization

- Admin panel and user panel

- Management of posts and comments

- Manage podcasts and resources

- News management

- Edit user account

- Upload photos and videos

and so on.

## 🔨 Tools

#### Front-end:

> For the front-end part of this project, I used nextjs version 14 because performance and SEO discussion were important to me. I also wanted to use the SSR mechanism and server-side components. If heavy processing was to > be done in some parts of the program, this Processing should be done by the server, not the user`s system. I also wanted to manage the discussion of data caching in the parts where the data should be dynamic. In this > project I used tailwindcss to consider the styles and also developed the UI components myself. I would like this project to be done with typescript that is safe in terms of typing and managing runtime and compile time ?> errors well and somehow avoiding technical debt.

> The >functionality of this project includes:

- Zod: For data validation

- React-Hook-Form: For managing forms

- Tanstack-Query (React-Query): To manage server-side requests and statuses

and so on.

#### Back-end:

> I decided to separate the back-end part of this project from the front-end and manage the back-end in another part of the project files, so I used the Appwrite platform to manage the back-end and database of this project.

## Installation and setup

Environment Variables:

>To run this project, you need to add the following environment variables to your .env file. for example :

> `NEXT_PUBLIC_APPWRITE_API_ENDPOINT=https://cloud.appwrite.io/v1`


> `NEXT_PUBLIC_APPWRITE_PROJECT_ID=`


> `NEXT_PUBLIC_APPWRITE_DATABASE=`


> `NEXT_PUBLIC_APPWRITE_USERS_COLLECTION=`


> `NEXT_PUBLIC_APPWRITE_POSTS_COLLECTION=`


> `NEXT_PUBLIC_APPWRITE_CATEGORIES_COLLECTION=`


> `NEXT_PUBLIC_APPWRITE_COMMENTS_COLLECTION=`


> `NEXT_PUBLIC_APPWRITE_PODCASTS_COLLECTION=`


> `NEXT_PUBLIC_APPWRITE_RESOURCES_COLLECTION=`


> `NEXT_PUBLIC_APPWRITE_STORAGE_COLLECTION=`


> `NEXT_PUBLIC_APPWRITE_API_KEY=`


Install the all dependencies and run the project:

>``` sh

>npm install

>npm run dev

>```

## 🙏 Acknowledgments

I used Figma Praha design to create the user interface of this project, which was made available for free by Praha and it was a beautiful design.[Praha | Produce UI](https://www.figma.com/@praha)