An open API service indexing awesome lists of open source software.

https://github.com/Edyane/ignite-feed

This project was developed to display a list of posts, simulating a social media feed.
https://github.com/Edyane/ignite-feed

ignite-reactjs javascript react typescript

Last synced: 9 months ago
JSON representation

This project was developed to display a list of posts, simulating a social media feed.

Awesome Lists containing this project

README

          

# Ignite Feed

Welcome to **Ignite Feed**, a simple and interactive project built with React and JavaScript. This project was developed to display a list of posts, simulating a social media feed, and is a great exercise to enhance your skills with React and JavaScript. Additionally, a TypeScript version of the project is available to help you further understand and apply TypeScript concepts.

## Project Structure

The project is organized into two main folders:

1. **ignite-feed**:
This folder contains the initial version of the project developed with **React** and **JavaScript**.

2. **ignite-feed-ts**:
This folder contains the same project, but rewritten using **TypeScript**. This version was created to reinforce TypeScript concepts and apply its type-safety features to the project.

## Getting Started

### Prerequisites

Before you start, make sure you have the following tools installed on your machine:

- **Node.js** (Recommended version: 14.x or higher)
- **npm** (Node package manager)

### Installation

To get started, clone the repository to your local machine and navigate into the project folder:

```bash
git clone
cd
```

Then, follow these steps for both the ignite-feed and ignite-feed-ts directories.

### Install Dependencies
Navigate to the desired project folder (e.g., ignite-feed or ignite-feed-ts), and run the following command to install all necessary dependencies:

```bash
npm install
```

Run the Development Server. After the dependencies are installed, run the following command to start the development server:

```bash
npm start
```

This will launch the application in your browser, typically at http://localhost:3000.

### Exploring the Folders
ignite-feed:
In this folder, you'll find the initial project using JavaScript, showcasing React concepts such as state management, components, and props.

ignite-feed-ts:
This folder contains the TypeScript version of the project. Here, the JavaScript code is refactored to make use of TypeScript features such as types, interfaces, and more robust type-checking.

### Learning Goals
- Understand how React components work with both JavaScript and TypeScript.
- Learn how to apply TypeScript's type-safety features, including type annotations, interfaces, and generics.
- Compare JavaScript and TypeScript approaches to developing React applications.
- Technologies Used:
React (for building UI components), JavaScript (for the ignite-feed folder), TypeScript (for the ignite-feed-ts folder), CSS modules (for styling the components).

### License
This project is open-source and available under the MIT License.

### ⚙️
![React Badge](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=000&style=flat-square)
![JavaScript Badge](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=000&style=flat-square)
![TypeScript Badge](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff&style=flat-square)