Creating open source project in React js

I will start in point wise.

This is my first project writeup. any feedback will be much appreciated,

1. Thinking phase

I'm very interested in open-source projects, and I was thinking of creating one myself. So, I started something like a simple project, and at that time I was reading another article 111 Linux commands, and I thought, Why not create something similar to this one?

Many of the forks want the meaning of commands in one line itself.

So, I packed my bag (my desk) and sat outside for 10–20 minutes and started thinking.

2. Wireframe setup

Initially, I thought I would create a simple website with very minimal UI because my main intention was to add commands, which would require a lot of time.

The main question was: how am I going to handle the command, like, from where will I get the command's answer?

using an API?

I thought the same, but this will become costly as for the API, I have to create a form, I have to add validations, I also have to check if the user doesn't dump garbage data, I have to create some eternal storage and handle that storage, and for the contribution, I have to look into something that will all be so much.

After some time, I thought of storing all the commands in a simple JSON file and fetching the data from that file. As everything will be a JSON file, it will be handy for the contributors to contribute to a simple file.

Then,

I knew I was going to use react from the beginning.

Next, we'll go over all of the pages I'll need. I decided with home page only because it would increase the complexity.

This is all the process I went through, and this took around 30 minutes to do.

So, I will go with

Tech Stack

React JS
JSON
CSS

yes i have use simple css coz it will expand more scope for others to contribute and implement their ideas.

React project setup

run the command

npx create-react-add oneliner # oneliner -> app name
cd onliner
npm i react-router-dom

Creating pages, components, brands, and assets folders

Pages will contain the 404 page.

Assets will contain the JSON file.

components will contain the parts of the page. e.g., header, footer, and body content for the homepage

Brands will contain the GitHub logo.

cd src
mkdir assets
mkdir components
mkdir pages
mkdir brands

cd components
touch Header.jsx
touch   Body.jsx
touch Footer.jsx
touch Answer.jsx
touch Action.jsx 
cd ..

cd pages
touch 
NotFound.jsx
cd ..

cd assets
touch DB.json
cd ..

cd brands
touch GitHub.jsx

now moving to the coding part

3. Coding

Now, as the wireframe is created,we will start with he actual coding

App.jsx

vim App.jsx


import { Routes, Route, BrowserRouter } from  'react-router-dom'
import  Body  from  './components/Body'
import  Footer  from  './components/Footer'
import  Header  from  './components/Header'
import  NotFound  from  './pages/NotFound'
function  App() {

return (
        <>
        <BrowserRouter>
        <Header  />
        <Routes>
        <Route  path="/"  element={<Body  />}  />
        <Route  path="/*"  element={<NotFound  />}  />
        </Routes>
        <Footer  />
        </BrowserRouter>
        </>
)
}
export  default  App

Components

component: Header.jsx

cd components
vim Header.jsx

import { Link } from "react-router-dom";

const Header = () => {
    return (
        <>
            <header>
                <h1><Link to="/">one-liner</Link></h1>
            </header>
        </>
    )
}
export default Header;

component: Footer.jsx

vim Footer.jsx

import Action from "./Action";

const Footer = () => {
    return (
        <>
            <div className="footer">
                <footer>
                    <Action />
                    <a href="//github.com/asPerRequirements/oneliner" className="underline-animation" rel="noreferrer">asPerRequirements</a>
                    <p className="small"><a href="https://opensource.org/" className="" target="_blank" rel="noreferrer">Open Source Project</a> by <a href="//github.com/scorcism" rel="noreferrer" target="_black">Abhishek Pathak</a></p>
                </footer>
            </div>
        </>
    )
}
export default Footer;

component : Body.jsx

vim Body.jsx

// For routing
import { useEffect, useState } from "react";
import Answer from "./Answer";
// DB
import DB from "../assets/DB.json"

const Body = () => {
    // State to manage data
    const [data, setData] = useState([]);
    const [answer, setAnser] = useState([])
    const [showAnswer, setShowAnswer] = useState(false)

    // To search from the data and store it in answer
    const handleSearch = (e) => {
        let value = e.target.value
        data.forEach(block => {
            if (block.question.toLowerCase() === value.toLowerCase()) {
                setAnser(block)
                setShowAnswer(true)
            }
        })
    }

    useEffect(() => {
        setData(DB);
    }, [])

    return (
        <>
            <section className="main__body">
                <div className="body_container">
                    <div className="body__fields">
                        <input type="text" onChange={handleSearch} name="geet" className="body__fields--input" id="little" placeholder="Enter Keyword ..." />
                    </div>
                </div>
            </section>
            <section className="section__answer">
                <Answer answer={answer} showAnswer={showAnswer} setShowAnswer={setShowAnswer}/>
            </section>
        </>
    )

}

export default Body;

component : Answer.jsx

vim Answer.jsx


const Answer = ({ answer, showAnswer, setShowAnswer }) => {

    const hide = () => {
        setShowAnswer(false);
    }
    return (
        <>
            {
                showAnswer &&
                <div className="answer">
                    <div className="answer_conatiner">

                        <p className="answer__p">
                            {answer.answer}
                        </p>
                        <button onClick={hide} className="hide_answer">x</button>
                    </div>
                </div>
            }
        </>
    )
}
export default Answer;

component :Action.jsx

vim Action.jsx

import GitHub from "../brands/GitHub"

const Action = () => {
    return (
        <>
            <div className="action__container">
                <div className="actions">
                    <GitHub />
                </div>
            </div>
        </>
    )
}

export default Action

Pages

pages: NotFound.jsx

cd ../pages
vim NotFound.jsx

import { Link } from "react-router-dom";

const NotFound = () =>{
    return (
        <>
            <div className="notfound">
                <h1>Not Found</h1>
                <Link to="/">Home</Link>
            </div>
        </>
    )
}

export default NotFound;

Brands

brands: GitHub.jsx

cd ../brands
vim GitHub.jsx


const GitHub = () => {

    return (
        <>
            <div>
                <a href="//github.com/asPerRequirement/oneliner" target="_black" rel="noreferrer">
                    <img className="github" src="/github.svg" alt="github" title="Github Repo" />
                </a>
            </div>
        </>
    )
}

export default GitHub;

assets: DB.json

JSON DB

cd ../assets/
vim DB.json

[
    {
        "question": "chmod",
        "answer": "change permissions of a file",
        "category": "linux"
    },
    {
        "question": "ls",
        "answer": "list directory contents",
        "category": "linux"
    },
    {
        "question": "cd",
        "answer": "Change directory",
        "category": "linux"
    },
    {
        "question": "chown",
        "answer": "Change Ownership of file",
        "category": "linux"
    }
]

css

CSS: index.css

cd ..
vim index.css

Not Pasting here, coz its a lengthy file. you can follow this link.

Now all the coding part is done

4. Run the application

Open terminal
Enter
```
npm run start
```

4. output:

Conclusion

You can click on this to access the project

This project is very much simple and has very less features your contribution will be much appreciated.

any feedback about the article will make me more happy

If the article helps you, leave a like, follow, or anything 🙂.

You can follow me on LinkedIn, GitHub, Dev.to and hashnode.

Bye

Blog