hiteshchoudhary / apihub

Your own API Hub to learn and master API interaction. Ideal for frontend, mobile dev and backend developers.
https://freeapi.app
Other
6.71k stars 1.08k forks source link

FRONTEND: Status Code Insight #73

Closed atulbhatt-system32 closed 6 months ago

atulbhatt-system32 commented 9 months ago

Frontend App Title

statuscodes

Overview

To offer users a comprehensive understanding of various HTTP status codes.

Technologies to be Used

Detailed Features

1. Code Lookup:

2. Detailed Explanations:

3. Elegant User Interface:

4. Search and Filter:

5. Examples and Case Studies:

6. Regular Updates:

Tech Stack Used

ReactJs, Zustand, tailwindCss, Shadcn

Built For Platform

web

Project Path

$ROOT_FOLDER/examples/kitchen-sink/statuscodes/web/react-shadcn-tailwind-zustand

wajeshubham commented 9 months ago

Hi @atulbhatt-system32,

Quick question about the tech stack for the project:

  1. Is Zustand necessary for our simple state needs?
  2. Any specific reason for React.js for a single-screen app? could be done with vanilla typescript/javascript.
  3. Any UI reference you have for this app on how the UI is structured, how the input is taken and how the cards are shown

Your input is much appreciated!

Cheers, FreeAPI Team

atulbhatt-system32 commented 9 months ago

Hi @wajeshubham Thanks for the follow-up.

Some good points you mentioned regarding my tech stack choices. Let me break down your questions in the sequence of project requirements.

  1. I chose Zustand because it's lightweight when compared to redux. It may be required for storing (with persist) themes, user (browser with origin and port - not actual logged-in user) scores on quizzes, and keeping overall stats of user activities if required. Adding it later will not sync with the project name.

  2. Of course it can be a single-screen App. However, I want to keep improving the project and add more use cases. There will be another screen for Quiz sections.

  3. It's in progress, give me a day or two to present something on that. I will share the link here to Figma with some wireframes or designs. I hope that works.

If you want I should first plan everything for the project and then create an issue I can also do that.

wajeshubham commented 9 months ago

@atulbhatt-system32 First off, kudos on considering the addition of a Quiz section! That's an exciting feature that can truly enhance user engagement and provide an interactive learning experience. I'm looking forward to seeing the wireframes or designs on Figma.

Regarding Zustand, your point about its lightweight nature compared to Redux makes a lot of sense. It's great to know that you've already thought about potential use cases like storing themes, user scores, and overall activity stats.

As we delve into the Quiz section, I'm curious about exploring whether we could leverage the Context API for state management. Since the state requirements for quizzes may not be overly complex or spread across the entire app, this might provide a simpler alternative. What are your thoughts on this approach?

Best regards, FreeAPI team

atulbhatt-system32 commented 9 months ago

@wajeshubham I will get back to you with the wireframes and using context instead of zustand.

wajeshubham commented 9 months ago

@atulbhatt-system32 Thanks! Just to add, we are not too much focus on the design. So, just a basic low fidelity to get an idea about flow is enough 😀. And you can use cooked in components from shad cn or some equivalent UI library without designing your own design in figma.

Looking forward to see this app in action. 🚀

atulbhatt-system32 commented 9 months ago

@wajeshubham definitely plan is to use shadcn

atulbhatt-system32 commented 9 months ago

@wajeshubham

Here's the progress of Figma.

I'm not a designer so just a skeleton here. But I also want to learn things while building this so trying to make a proper Figma design with Auto Layout. After the skeleton is complete I will add colors and stuff too to the figma before I code anything. I hope there's no rush in completing this application.

https://www.figma.com/file/4hJUujTFH8N2FVqAIqjSll/Status-Code-Insight?type=design&node-id=4%3A221&mode=design&t=3kdroMq9FIYLUr93-1

wajeshubham commented 9 months ago

@atulbhatt-system32 looks great! You can refer to the DevUI. We are continuously shipping application UI designs there. You can get some assistance on UI components there 😀.

atulbhatt-system32 commented 9 months ago

Thanks @wajeshubham

I think these designs can help me pick basic colors. Are they from chai and code backend series?

wajeshubham commented 9 months ago

Yes but this application also has some other app screens like social media, todo, chat app, auth screen. So, you can use UI components from these designs and get the app up and running without designing your own UI.

atulbhatt-system32 commented 9 months ago

@wajeshubham understood. Yeah, I checked it. There are some pre-made components in it. Cool thing. I mean what if I want to try some designing by myself? That's why wanted to know if there is some requirement to get the project done ASAP.

wajeshubham commented 9 months ago

There's no deadline, we just suggest you to use something pre cooked so you can focus more on business logic and project completion but if you are interested in designing your own UI we are open for that as well.

There's no deadline as this is an open source project, you can build it at your own pace 😀 but yes, one thing to keep in mind is, keeping this issue open for too long is not feasible.

atulbhatt-system32 commented 9 months ago

@wajeshubham understood. Development will be fast that I ensure. Also, we will have to raise PR when the entirety of the project is done right?

wajeshubham commented 9 months ago

You can open it when you push your first commit to the feature branch of your forked repository of api hub. We will mark it as a draft PR until you submit it for the final review.

Thanks

atulbhatt-system32 commented 9 months ago

@wajeshubham

https://www.figma.com/file/4hJUujTFH8N2FVqAIqjSll/Status-Code-Insight?type=design&node-id=0%3A1&mode=design&t=By3YdyZdJKrcQurH-1

how's the flow of the application?

I will start building now and then pick up the quiz section in v2. Is it possible?

wajeshubham commented 9 months ago

@atulbhatt-system32 looks great 👍🏻, just one question, In the details of status code you are including examples of all the request methods which is not included in the FreeAPI status code api response. Let us know how you are planning to approach it?

We are also open for contributions in the core status code module of the FreeAPI where you can include these examples in the api itself.

Talking about content of the following screen: Screenshot_2024-02-01-09-53-53-66_40deb401b9ffe8e1df2f1cc5ba480b12.jpg

atulbhatt-system32 commented 9 months ago

@wajeshubham This is a flow of what I want my design to look like. The actual implementation will be a little different. First I will create the minimum implementation and then of course I am also willing to contribute to backend apis

wajeshubham commented 9 months ago

@atulbhatt-system32 Sounds good!

iam-gopi commented 8 months ago

@wajeshubham are these changes still open? Would you like me to work on it? Of course Im new to this repo. Im a FSD by profession. If you could reply would be better.

atulbhatt-system32 commented 8 months ago

@wajeshubham I will pushing updates today.

atulbhatt-system32 commented 8 months ago

@wajeshubham where can I find the API for the same? I haven't found it in the the apihub repo. If this doesn't exist I can complete it without API and then make the backend too later or someone else can pic k the backend.

For now I'll be using this link to fetch the data: /codes.json

wajeshubham commented 8 months ago

It's in the kitchen sink already. Please find it here: https://api.freeapi.app/#/%F0%9F%9A%B0%20Kitchen%20Sink/getAllStatusCodes

atulbhatt-system32 commented 8 months ago

@wajeshubham thanks. I pushed one page completed with API integration. The pages shows all the codes list. I will be finishing the next page by the end of next week. Currently I'm overloaded with some projects so couldn't spare much time.

But I'm sure I will be able to complete the search code page before weekend probably.

Shall I move out the PR from draft or do it next week.

wajeshubham commented 7 months ago

@atulbhatt-system32 Once you think that the PR is ok for review you can remove it from draft and request a review from us.

wajeshubham commented 6 months ago

PR: #91