GithubHelp home page GithubHelp logo

blog's Introduction

Front + Back

This is a simple blog consisting of three main parts created with Next.js + Tailwindcss using Typescript :

  • A list of all posts with search functionality
  • Ability to add a new post
  • Post details page

Getting Started

First, clone the project:

git clone https://github.com/z10mx7/blog.git && cd blog

Then, install the packages:

Notice: if you aren't in "blog" directory, go in there first using: cd blog

npm i
# or
yarn
# or
npm install

Then, run the development server:

npm run dev
# or
yarn dev

Finally, Open http://localhost:3002 with your browser to see the result.

URL's

Notice : you can visit this urls, even without running any backend server(node or python).

Deploy in Server

you can deploy this in diffrent ways, but lets talk about easiest way, PM2! .

  • First, put the files to you server using scp or ftp or just use git clone .

  • After that, install the pm2:

npm i -g pm2
  • Then , run the app using pm2 .
pm2 start ecosystem.config.js

Notice : by default running port is set to 3002 , feel free to change it on any port you want . do that by modifying "ecosystem.config.js"

Finally , you can Open http://YOUR_SERVER_IP:3002 with your browser to see the result.

Directory Structure

.
├── api
│   ├── main.py
├── components
│   ├── Blog
│   ├── Home
│   ├── Shared
│   └── ...
├── pages
│   ├── _app.tsx
│   ├── _document.tsx
│   ├── index.tsx
│   ├── new.tsx
│   └── post
│      └── [id].tsx
├── public
│   ├── assets
│   │   └── icons
│   │   └── images
│   └── ...
├── styles
│   ├── globals.css
├── utils
│   ├── helper.ts
│   ├── types.ts
├── .env.local
├── next.config.js
├── package.json
├── ecosystem.config.js
├── tailwind.config.js
└── ...
  • api : This directory contains a python webserver using "fastapi" and faker to generate fake data . its the python version of me-majidi/blog-server . if you got some errors using my api, just use the node version that he write.

  • components: This directory contains reusable React components specific to your application. Components related to the blog, home page, shared components, and others can be organized into separate subdirectories.

  • pages: This directory contains all the pages of your Next.js application. The _app.tsx file is used to initialize the application, and _document.tsx is used to customize the HTML document. The index.tsx represents the home page, new.tsx represents the creation page, and the post directory contains the dynamic [id].tsx file for displaying individual blog posts based on their ID.

  • public: This directory is used to store publicly accessible static assets, such as icons and images. It can be further organized into subdirectories like assets to keep assets organized.

  • styles: This directory holds the global CSS file (globals.css) that applies styles globally to your application. Additional stylesheets or directories for component-specific styles can be added as needed.

  • utils: This directory contains utility files such as helper.ts for helper functions and types.ts for TypeScript type definitions.

  • .env.local: This file is used to store environment-specific configuration variables for local development.

  • next.config.js: This file is used to configure Next.js and customize its behavior.

  • package.json: This file lists the dependencies and scripts for your project.

  • ecosystem.config.js: This file is related to process management and can be used by tools like PM2 for deployment and server configuration.

  • tailwind.config.js: This file is used to customize the Tailwind CSS framework configuration.

Extra - Backend Using Python/FastAPI

First, you must have python 3.8+ and venv and pip installed already.

Second, go inside api directory , then create and enable a venv :

cd api && python3 -m venv venv

source venv/bin/activate

Third , install the packages :

pip install -r req.txt

Then, run the server :

uvicorn main:app --port 3000
# or
uvicorn main:app
# or 
uvicorn main:app --port 3000 --host 0.0.0.0

Open http://localhost:3000 with your browser to see the swagger documentations.

you can also use the same postman json collection .

TODO

  • middleware and Auth for creating new posts .
  • loading during creating the post
  • add layouts

blog's People

Contributors

z10mx7 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.