Skip to content

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

Notifications You must be signed in to change notification settings

Edyane/ignite-feed

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

61 Commits
 
 
 
 
 
 

Repository files navigation

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:

git clone <repository-url>
cd <project-folder>

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:

npm install

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

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 JavaScript Badge TypeScript Badge

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published