/Blog-React-TS

A simple blogger application using react with typescript, axios and JSONPlaceholder as an API

Primary LanguageTypeScriptMIT LicenseMIT

πŸ…±οΈBlog React TS

πŸ‘€Overview

This repository contains a web application developed using React with TypeScript as the programming language, Vite as the bundler and development server, Axios for HTTP requests, and React Router Dom for route management.

The application is an example application demonstrating the integration of various popular technologies from the React ecosystem for building modern web applications.

πŸ“€Last Update

Version 0.0.2 -> build: deploy is here!

πŸ–₯ To check the project deployment click here

πŸ“Έ Screenshots

Screenshot

Screenshot

Screenshot

βš™οΈInstallation Requirements

Make sure to have Node.js and npm (or yarn) installed on your machine before proceeding with the installation instructions.

  • Node.js (version 14 or higher recommended)
  • npm or yarn (npm is automatically installed with Node.js or you can choose to manually install yarn)

😎Installation

  1. Clone this repository to your local environment:
git clone https://github.com/DanielMendesSensei/Blog-React-TS.git
  1. Navigate to the application directory:
cd Blog_React_TS
  1. Install project dependencies using npm or yarn:

With npm:

npm install

With yarn:

yarn

πŸ’½Running the Application

With npm:

npm run dev

With yarn:

yarn dev

πŸ“‚Project Structure

Blog_React_Ts/
β”œβ”€β”€ .github/
β”œβ”€β”€ public/
β”‚   β”œβ”€β”€ imgs/
β”‚   β”‚   β”œβ”€β”€ Screenshot1.png
β”‚   β”‚   β”œβ”€β”€ Screenshot2.png
β”‚   β”‚   β”œβ”€β”€ Screenshot3.png
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ assets/
β”‚   β”‚   β”œβ”€β”€ imgs/
β”‚   β”œβ”€β”€ axios/
β”‚   β”‚   β”œβ”€β”€ config.ts
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ Footer/
β”‚   β”‚   β”‚   β”œβ”€β”€ Footer.css
β”‚   β”‚   β”‚   β”œβ”€β”€ Footer.tsx
β”‚   β”‚   β”œβ”€β”€ Navbar/
β”‚   β”‚   β”‚   β”œβ”€β”€ Navbar.css
β”‚   β”‚   β”‚   β”œβ”€β”€ Navbar.tsx
β”‚   β”‚   β”œβ”€β”€ Skeleton/
β”‚   β”‚   β”‚   β”œβ”€β”€ Skeleton.css
β”‚   β”‚   β”‚   β”œβ”€β”€ Skeleton.tsx
β”‚   β”‚   β”‚   β”œβ”€β”€ SkeletonHome.tsx
β”‚   β”œβ”€β”€ routes/
β”‚   β”‚   β”œβ”€β”€ About/
β”‚   β”‚   β”‚   β”œβ”€β”€ About.css
β”‚   β”‚   β”‚   β”œβ”€β”€ About.tsx
β”‚   β”‚   β”œβ”€β”€ Contact/
β”‚   β”‚   β”‚   β”œβ”€β”€ Contact.css
β”‚   β”‚   β”‚   β”œβ”€β”€ Contact.tsx
β”‚   β”‚   β”œβ”€β”€ Home/
β”‚   β”‚   β”‚   β”œβ”€β”€ Home.css
β”‚   β”‚   β”‚   β”œβ”€β”€ Home.tsx
β”‚   β”‚   β”œβ”€β”€ NewPost/
β”‚   β”‚   β”‚   β”œβ”€β”€ NewPost.css
β”‚   β”‚   β”‚   β”œβ”€β”€ NewPost.tsx
β”‚   β”œβ”€β”€ App.css
β”‚   β”œβ”€β”€ App.tsx
β”‚   β”œβ”€β”€ index.css
β”‚   β”œβ”€β”€ main.tsx
β”‚   └── vite-env.d.ts
β”œβ”€β”€ .eslintrc.cjs
β”œβ”€β”€ .gitignore
β”œβ”€β”€ index.html
β”œβ”€β”€ LICENSE
β”œβ”€β”€ package.json
β”œβ”€β”€ README.md
β”œβ”€β”€ tsconfig.json
β”œβ”€β”€ tsconfig.node.json
└── vite.config.ts

πŸ’ͺ🏾 Contribution

If you want to contribute to this project, follow these steps:

  1. Fork the repository.
  2. Create a new branch: git checkout -b my-contribution
  3. Make your changes and send a pull request.

Please follow the contribution guidelines to ensure a smooth process.

πŸ“Ÿ Contact

For contact, send me a message on my Linked-In

πŸš€ Technologies

This project was developed with the following technologies:

  • React
  • TypeScript
  • Axios
  • Vite
  • HTML & CSS
  • Git e Github

πŸ“œ License

This project is licensed under the MIT License..