Introducing QNA - The best place to find answers to all the questions ⭐

Introducing QNA - The best place to find answers to all the questions ⭐

Become A Free Person With QNA

Introduction 🤩

I heard about the PlanetScale X Hashnode hackathon a few weeks ago and In the first two weeks, I was finding an idea for this hackathon to build. So here is what I built for the hackathon.

Introducing QNA 🌟

Everyone has questions and also they need answers. Do you want to find all of your answers in one place? Then QNA is the answer. We know there are already a lot of question-and-answer sites in the world. But they are a bit complex. That's where QNA can help you. If you want to ask a question in a more simple way, you just have to create a QNA account and go to the ask tab and enter your question, that's all you have to do.

Tech Stack ⚙️

Talking of the tech stack that I used, I used all my day-to-day stuff and some additions.

  1. React - To build the frontend
  2. Nodejs & Express - To build the backend
  3. Bootstrap - To style the app
  4. PlanetScale - As a database
  5. Redux - To manage states
  6. JWT - For authentication
  7. Axios - To consume the API
  8. Bcrypt - To hash passwords
  9. Vercel & Railway - For the deployment

Features 🔥

  1. Authentication.
  2. Create questions as many as you want.
  3. Edit and delete questions.
  4. Post answers.
  5. Edit and delete answers.
  6. Check all the questions that you have asked.
  7. Check all the posted answers.
  8. Clear user feedback.
  9. Responsive across multiple devices.
  10. Simple UI & Easy to use.

Demo 🪧

1. Design

For the frontend and styling purposes, I used React and Bootstrap. I made the website simple looking, responsive to make other people easy to use my site, and also I used illustrations to make the app look better too.

qna-home-page.png

2. Feedbacks

For error handling and feedback, I used redux-toolkit.

Alert:

Success Alert

qna-success-alert.png

Error Alert

danger-alert.png

Loading:

qna-loading.png

3. Authentication

I added authentication using JWT.

Register Page:

Users need to enter their name, email, and password to register to the QNA.

register.png

Login Page:

After the user registers, the user needs to log in.

login.png

4. Question Creation

Here user can enter a heading for the question and enter the question in the description section.

ask-question.png

5. Question View

Users can see the question in the first section and in the second section there are posted answers.

question-views.png

6. Posting Answers

Users can comment on their answers in the comment section.

question-views.png

7. My Questions

Users can view their own questions and edit them or delete them.

All Questions:

Here users can view all the questions created by themself.

my-questions.png

Edit Question:

By pressing the edit button you will redirect to the editing tab where the user can edit their questions.

edit-question-2.png

Edited Question:

After editing the question the "Created date" changed to "Last edited" automatically.

edited-question.png

Questions remaining after deleting:

deleted-question.png

8. My Answers

Users also can view their answers and edit them or delete them.

All Answers:

Here users can view all the answers posted by themself.

my-answers.png

Edit Answer:

By pressing the edit button you will redirect to the editing tab where the user can edit their answers.

edit-answer-3.png

Edited Answer:

After editing the answer the "Posted date" changed to "Last edited" automatically.

edited-answers.png

Answers remaining after deleting:

deleted-answer.png

Build Process 🛠️

As this was the first time I was working with PlanetScale, so I had to cover some basic stuff before creating the project. I read this blog post on PlanetScale by James Q Quick which gave me an overview of how to use PlanetScale with Nodejs and Express. Then started reading the official docs of PlanetScale. Once I covered the basics, then the next step was to connect my project with PlanetScale after that I created my schemas and start building the project backend.

I started off by implementing authentication, then CRUD operations on the QNA. And then I moved to the frontend. As I said, I built the frontend with React and Bootstrap. It took me a while to come up with a nice-looking UI as I am not a designer. I finished all the data fetching with the help of Axios. For authentication, I used JWT as I mentioned above, and for state management I used Redux. Also, I used Prettier to maintain the code quality as well.

After finishing all of this stuff I deployed my project backend on Railway and frontend on Vercel. And then I licensed my project QNA and created the Readme file on Github.

Struggles 😕

  • As I'm not a designer, It was a bit hard for me to come up with a nice-looking UI.
  • It was the first time to use PlanetScale with nodejs and express.
  • I was running out of time because I started to build my project on the 20th of July.
  • There were some unknown error codes in my project when building this, I google those codes but I was unable to find the answers on google. So had to find the solutions on my own.

Future Plans 🔮

  • Improve UI - Add pagination, Change fonts and colors, Add background images, etc...
  • Adding Search option - Search questions and answers by heading, text, description, creator name, etc...
  • Adding Filter option - Filter questions and answers.

Important Links 🔗

Conclusion 😊

Thank you so much for reading the article, thanks to hashnode and planetscale for giving me the opportunity to work on this wonderful project, I hope Hashnode and PlanetScale team will like it!