Kindly visit the below link once you are done reading.
https://nord-swapi-challenge-pink.vercel.app/
Imagine you are bingewatching a movie and the movie has 3 parts. Wouldn't it be too much to remember all the character names? You know what would be more difficult? Binge Watching a movie which has more than 6 parts 😆 and the worst part about that is? ALL THE CHARACTERS ARE RELATED SOMEHOW! And also the movie doesn't have a proper sequence in which we can watch it(It is still Disputed). You might have guessed the movie by now. It's STARWARS!
Don't worry, Myself a Potential Nord Finance Employee have brought to you, the **perfect** Star Wars dictionary.
No need to worry about opening google everytime you see a charcter whom you are not familiar with or was in the first movie and suddenly has appeared in the seventh movie!
We have got you covered.Just use the Search Functionality in our app and you will find everything about them(LITERALLY everything). It goes from their Name to the starships they own.
- Clone the repository
- nodeJS 14.x or later should be installed on your system.
- Open the repository in terminal and type npm start
- npm install react-scripts --save
- npm start
- The app should start at localhost:3000
Lets dig more in to the Functionalities in the technical aspect:
- The Page has a paginated Table with 12 columns and 10 rows. Each having information about he character mentioned the first row.
- We can Search the elements in the Search Bar which will show us the result as a row in the table.
- It shows the loading state while the request is processing.
- Display the current search query in the search input
- Once we clear the search input we can see the first page again.
As you would expect, I have used the yellow and black but also some other colors in the palatte.
I have used 4 colors from the above scene which is in the movie the Empire Strikes Back.
the colors used are:
- #E5BFAC
- #E78A6B
- #ABA3D6
- #181E38
- #000000
- #FFFF00
- I have mastered the 3 main hooks i.e. useState, useEffect and useContext(It was the first time I used it in an app, it was learnt by solely going through the document)
- Used CSS animations whereever necessary.
- I have got to know the best practices which are used for displaying tables in HTML.
- Read the document provided by you guys and focused on quality over feature completeness.
- The table is still short of some functionalities and yet to pass some test cases.
- I have to implement the sort functionality, which I know can be done with useReducer but due to time constraints I wasn't able to do so.