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
Top comments (0)