andrecampll / next-ifood

Ifood clone made with NextJS ⚛️

iFood 🍔

This repository refers to a Front-end Clone of the iFood application made with Next.js 🚀

Proposal 🔥

This project is a study of the iFood interface. The idea is to simulate a food delivery application, bringing data from a fake API and integrate the information available on screen, such as the restaurants available to the customer. The difference of this project is the responsive mode built for all mobile devices and the pages built using Server Side Rendering (SSR).

Tecnologies 🚀

Next.js ⚛️
React ⚛️
Redux ⚛️
Redux Saga ⚛️
Styled-Components 💅🏻
React Icons ⚛️❤️
Typescript 🦕

Result 🤓

How to get this repository? 🤔

To obtain this project, follow the steps:

1. Clone this repository using git clone .
2. Run the yarn command at the root of the cloned project folder to download the dependencies.
3. Run npx json-server server.json -p 3333 at the root of the project folder to initialize the Fake API.
   (if you want, you can use the public api url managed by My JSON Server, which comes by default in the api.ts file)
4. Run yarn dev at the root of the project folder to start the application in development mode.
5. Open the application in your emulator. 🚀

How to contribute? 😍

Fork this repository

# Clone your fork
$ git clone your-fork-url && cd next-ifood

# Create a branch with your feature or bug fix
$ git checkout -b my-branch

# Commit your changes
$ git commit -m 'my changes'

# Push your branch
$ git push origin my-branch

Delete your branch, if you want, when your pull request merge.

Made with 💜 by andrecampll .

next-ifood's Issues

Add real user location to Header.

It would be nice if user could actually see his address in header using the browser's Geolocation API. It would make the clone similar to the original behavior.

Can I add a PR to implement this feature?

Greetings,
Caio.

Improvements on tests

Problems

• You aren't testing some components at all

next-ifood/src/__tests__/components/Categories.spec.tsx

Line 41 in ffa033c

debug();

You are using debug as part of the test, and debug is, like the name says, a debug tool.

• You should also look your coverage, I'm pretty sure it's too low for this application

next-ifood/src/components/pages/Home/Categories.tsx

Lines 15 to 23 in ffa033c

	if (!data) {
	return (
	<Container className="scroll-box">
	<div role="list" className="scroll-box__wrapper">
	<CategoryPlaceHolder repeatCount={13} />
	</div>
	</Container>
	);
	}

E.g., You aren't testing this error.

• You also should stop mocking fetch

Solution

• In the Categories.spec case, you should test if the location is changing to your category page when clicking the image (Which in my mind it should be a button to a better SEO and better testing practices, getByRole).

• https://kentcdodds.com/blog/stop-mocking-fetch Stop mocking fetch

Tips

• Who told you should test with debug() stop listening and following him/her

• Tests should be simple and readable

• Check your coverage and don't just create component without test since you have tested already, try to not hurry on creating your app, it's like painting every step is needed to create beautiful art. Create the component -> Create the test. Or even follow TDD's practices (But for now create the tests)

• If you know how to create tests and why you are doing it, you let many people behind you, and believe me you cannot rush programming learning, so if you want to test something get a time and study tests.

Any doubt or even if you disagree with, don't hesitate to contact me :)