https://api.github.com/repos/Dannydoesdev/starwars-search-api/contents/{+path}

572895196.jpg

Search engine using the Star Wars API (SWAPI) - Code Challenge project

MIT License

starwars-search-api

Star Wars - The Search Engine

<h1>Star Wars - The Search Engine </h1><h2><em>A Code Challenge</em></h2><p></p><h2>SWAPI, React and NextJS</h2><hr><h3>Quick background</h3><ul><li><p>This started as a take home coding test brief, to build a SWAPI search from scratch - the features and stack are drawn from that brief</p></li><li><p>But, as is not something I would usually build, I had a lot of fun optimising it &amp; jazzing it up to be extra 'Star Wars-y'</p></li></ul><hr><h2>Live site</h2><h3><a href="https://swapi-test-brown.vercel.app/" rel="noopener noreferrer nofollow" target="_blank">Find the live site by clicking here</a></h3><hr><h2>Contact</h2><h3>You can find me at <a href="https://www.linkedin.com/in/danieltmcgee/" rel="noopener noreferrer nofollow" target="_blank">Linkedin</a></h3><hr><h2>Challenge:</h2><p>Consume the Star Wars API (SWAPI) using React, NextJS and other JS technologies you deem fit.</p><h3>Acceptance criteria</h3><ul><li><p>Home screen contains a list of films pulled from the SWAPI</p></li><li><p>List should be searchable</p></li><li><p>Films can be favourited, this state should be persisted using local storage</p></li><li><p>Favourited films should appear at the top of the list</p></li><li><p>Favourited films can be unfavourited</p></li><li><p>Film list items can be clicked to show individual film page</p></li><li><p>Film page should exist on it’s own URL</p></li><li><p>Film page should show all the information pulled from the SWAPI endpoint for an individual film</p></li><li><p>The list of characters should display a tooltip when a list item is hovered, containing their name, birth year, eye colour, gender, hair colour and any other information you deem necessary</p></li><li><p>Film page should contain a back to home link</p></li><li><p>Provide public GitHub repo to source code</p></li><li><p>Use SCSS modules for styling</p></li><li><p>Use flex or grid for layouts - avoid Bootstrap etc</p></li><li><p>Host the finished project on Vercel or similar</p></li></ul><h3>Links:</h3><ul><li><p><a href="https://www.swapi.tech/" rel="noopener noreferrer nofollow" target="_blank">https://www.swapi.tech/</a></p></li><li><p><a href="https://nextjs.org/" rel="noopener noreferrer nofollow" target="_blank">https://nextjs.org/</a></p></li></ul><hr><h2>Architecure</h2><ul><li><p>To give it the most 'Star Warsy' feel I have made the index page a (skippable) intro sequence</p></li><li><p>NextJS 13 is used as the framework and SWR 2.0 used for client API calls</p></li><li><p>Components that are exported to pages are in the components/ folder</p></li><li><p>Hooks for API Search (search page) and API ArraySearch (for individual film pages) are in the hooks folder</p></li><li><p>When a film page is clicked from the 'home' page, the arrays returned from SWAPI for each resource are sent to the useApiSeach hook and displayed when returned</p></li><li><p>SCSS styles are in the styles folder</p></li><li><p>Local storage for favourites is managed on the home.tsx page currently, getting localstorage on load &amp; updating on click</p></li></ul><hr><h2>Known issues/improvements planned</h2><ul><li><p>Individual film information for the film pages (/films/1 etc) is static but is loaded on the client side via SWR, this would be more efficient as a server side call</p></li><li><p>The search page could use the named resource Components (components/Character.tsx etc) to return a more dynamic set of information</p></li><li><p>The search page could allow the user to search 'all' endpoints and surface results as suggestions when results are empty</p></li><li><p>I would like to let the user click a search result and load a page with detailed information on that result in a dedicated page (currently opens the JSON blob on SWAPI)</p></li><li><p>Due to time constraints, testing and accessibility has not yet been implemented in a significant way</p></li></ul>