bermarte / React-task-tracker

Name of project

React-Task-Tracker

Table of contents

• Name of project
  • Table of contents
  • General info
  • Screenshots
  • Technologies
  • Setup
  • Code Examples
  • Features
  • Status
  • Inspiration
  • Contact
  • Instructions for use

General info

A straightforward CRUD project by leveraging React for the front-end and utilizing Json-server to create a RESTful API.

This project was built following this tutorial updated using the new react-router-dom.

React, a popular JavaScript library, served as the foundation for constructing the user interface of the application.

The project's backend was implemented using Json-server, a simple yet effective tool for generating a RESTful API based on a JSON file.

Screenshots

Technologies

• Node 18.8.0
• VSC code
• React 18.2.0

Setup

• npm run start

starts the UI on port 5000

• npm run server

starts the backend on port 3000

Code Examples

return (
  <Router>
    <div className="container">
      <Header
        onAdd={() => setShowAddTask(!showAddTask)}
        showAdd={showAddTask}
      />
      <Routes>
        <Route
          path="/"
          element={
            // Specify the element prop here instead of using the render prop
            <>
              {showAddTask && <AddTask onAdd={addTask} />}
              {tasks.length > 0 ? (
                <Tasks
                  tasks={tasks}
                  onDelete={deleteTask}
                  onToggle={toggleReminder}
                />
              ) : (
                "no task to show"
              )}
            </>
          }
        />
        <Route path="/about" element={<About />} />
      </Routes>
      <Footer />
    </div>
  </Router>
);

Features

List of features

• React UI
• Json-server backend

Status

Project is: done

Inspiration

Project by Traversy Media

Contact

By bermarte

Instructions for use

Getting Started

1. git clone [e-mail]:HackYourFutureBelgium/template-markdown.git
2. npm install
3. npm run start
4. npm run server