Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fork, Commit, Merge - Easy Issue (NextJS) #644

Closed
nikohoffren opened this issue Sep 23, 2023 · 2 comments
Closed

Fork, Commit, Merge - Easy Issue (NextJS) #644

nikohoffren opened this issue Sep 23, 2023 · 2 comments

Comments

@nikohoffren
Copy link
Member

nikohoffren commented Sep 23, 2023

Fork, Commit, Merge - Easy Issue (NextJS)

Create a sample product list with names and prices

Note: You don't have ask permission to start solving the issue or get assigned, since these issues are supposed to be always open for new contributors. The actions-user bot will reset the file back to previous state for the next contributor after your commit is merged. So you can just simply start working with the issue right away!

Description:

  • Your task is to create at least three sample products inside of the sampleProducts array with names and prices for landing page of an imaginary online store. The landing page displays a welcome message, a brief description of the store, and the sample products.

Start by navigating inside of the directory used in this project with the command:

cd tasks/nextjs/easy/nextjs-easy` 

Then run npm i to install NextJS, React and all the necessary dependencies for the project.

After installing the dependencies you can open the index.tsx file inside of src/pages directory, and start implementing your solution!


This project uses Tailwind for CSS and all the classes are already added to the components.
This project also uses TypeScript but you don't need to know any TypeScript to work with this issue. As soon as you add the sample products with names and prices, TypeScript will infer the types and all the errors present in the file will go away.

After you are done with the list, make sure you are in the tasks/nextjs/easy/nextjs-easy in your terminal and run npm run dev to start the NextJS server. Then, open "http://localhost:3000/" in your browser to check how the landing page looks.

If the product names and prices are showing up as they should, you are ready to make a pull request!


To work with this issue, you need to have npm and NodeJS installed to your local machine.
Check out README.md for more instructions of installing npm and NodeJS as well as how to make a pull request.


Feel free to ask any questions here if you have some problems!

Also, kindly give this project a star to enhance its visibility for new developers!

@jeremyhuang035
Copy link
Contributor

Hi nikohoffren, not sure if this is a typo?

make sure you are in the "tasks/nextjs/easy/nextjs-easy" in your terminal instead of "tasks/react/easy/next-easy"

@nikohoffren
Copy link
Member Author

nikohoffren commented Sep 24, 2023

Hi nikohoffren, not sure if this is a typo?

make sure you are in the "tasks/nextjs/easy/nextjs-easy" in your terminal instead of "tasks/react/easy/next-easy"

Good call! That is indeed a typo, it should be tasks/nextjs/easy/nextjs-easy because NextJS is in its own directory even though it is a React framework. It is now updated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants