This is the a test project given to me by Gratis for the role of a front end developer, this test comprises of 2 task, first I was being given and adobe xd design of a UI to bring to live. Secondly I was given a github api toList the most starred Github repos that were created in the last 30 days. Link to Project : Project Link
This section entails how the structure of the app will look like,from component to pages, hooks, utils, etc. Looking at my app, you'll see my component folder, this carries all the possible components I used in building the app from button to text, image etc, all the component goes in there, I also have the data folder were I put all my dummy data that I used in my app, is serves me as an api were I send a request and get a response back. Layout folder I use it to wrap other component inside the header and footer since there both constant and doesn't change much, It's makes it easier than always importing header and footer in all pages or components. Pages folder contains all my pages, About us Blog Coming Soon Git. Public folder was created when I created the next js application and I use it to put my images for faster loading were the image loads first before the other content comes. The styles folder I didn't use much, I was never touched tho.Utils folder is were I defined my media screens for my media queries to be used in the app.
This is a NextJS application, why I choose nextjs is because it's lighter, faster and SEO friendly also I don't need the react-router-dom when I want to do my routing, my pages folder is being served as my route by default, so any route i need, i just create a JS JSX file then input the content i want it to display and it'll display
In other for you to run the app, you download or clone the repo from github, open the project in your code editor then go to the code editor terminal and run npm i to install the node modules and packages it's depended. Then you run npm run dev to start the server and see what the website looks like. Alternatively, it has alread been hosted, so you can find the live link down bello
I used a couple numbers of packages in making sure the website looks exactly as it is on paper tho am not perfect but I'd try my best. Some of the packages are: Styled Coponent - For my styling React-Feather-Icons - Use to get me icons i used in the project. Axios - For making my request, React-Number-Format - For formatting my numbers, React-spinners - Use to indicate the network call process
Firstly I'll want the design to be made on figma instead of adobe xd because I find it hard to get some thing I need, so I had to improvise and make it work
I couldn't export images from the xd file which took alot of my time, I couldn't make the homepage responsive(Please pardon me) because of time and I was figuring how to use the xd design system since it's my first time working with adobe xd.