CodeCompass

Setting Up Your Environment

If you haven’t set up a React project yet, you can use Create React App:

bashCopy codenpx create-react-app code-compass
cd code-compass

Step 2: Create Basic Components

We’ll create two main components: ProjectList and AddProject.

1. Create ProjectList.js

In the src folder, create a new file called ProjectList.js:

jsxCopy code// src/ProjectList.js
import React from 'react';

const ProjectList = ({ projects, onDelete }) => {
  return (
<ul>
  {projects.map((project, index) => (
    <li key={index}>
      {project.name} - {project.description}
      <button onClick={() => onDelete(index)}>Delete</button>
    </li>
  ))}
</ul>
  );
};

export default ProjectList;

2. Create AddProject.js

Now create another file called AddProject.js:

jsxCopy code// src/AddProject.js
import React, { useState } from 'react';

const AddProject = ({ onAdd }) => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  const handleSubmit = (e) => {
e.preventDefault();
if (name && description) {
  onAdd({ name, description });
  setName('');
  setDescription('');
}
  };

  return (
<form onSubmit={handleSubmit}>
  <input
    type="text"
    value={name}
    onChange={(e) => setName(e.target.value)}
    placeholder="Project Name"
  />
  <input
    type="text"
    value={description}
    onChange={(e) => setDescription(e.target.value)}
    placeholder="Project Description"
  />
  <button type="submit">Add Project</button>
</form>
  );
};

export default AddProject;

Step 3: Main Application Component

Now, let’s integrate everything in App.js.

jsxCopy code// src/App.js
import React, { useState } from 'react';
import ProjectList from './ProjectList';
import AddProject from './AddProject';

const App = () => {
  const [projects, setProjects] = useState([]);

  const addProject = (project) => {
setProjects([...projects, project]);
  };

  const deleteProject = (index) => {
const newProjects = projects.filter((_, i) => i !== index);
setProjects(newProjects);
  };

  return (
<div>
  <h1>CodeCompass: Project Manager</h1>
  <AddProject onAdd={addProject} />
  <ProjectList projects={projects} onDelete={deleteProject} />
</div>
  );
};

export default App;

Step 4: Run Your Application

Now you can start your application. In your terminal, run:

bashCopy codenpm start

Step 5: Explore and Enhance

You now have a basic React application called “CodeCompass” that allows you to manage a list of coding projects. You can enhance it by adding features like:

• Editing project details
• Filtering projects by category or status
• Persisting project data in local storage

Summary

In this tutorial, you created a simple project manager app using React. You learned how to manage state, create reusable components, and handle user interactions.