Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Room-homepage in React(kinda) and Tailwind CSS

Desktop design screenshot for the Room homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I understand some of the react logic!

What specific areas of your project would you like help with?

The only problem is that I can't make the React work with my current tools(look in my code). To be more specific, npm is installed properly, but for some reason, it doesn't work for React(same with Yarn) -- and with Tailwind CSS was difficult to set up, but I make all the work manually(taking the code i needed, and it worked -- and it was easier because is not my first project in Tailwind). πŸ€” Maybe is too early to learn React, but I'd appreciate any advice, and maybe I'll retry this challange with React after I finish all the current learning path. Thank you in advance!!😊❀️

Community feedback

@BeinRain06

Posted

Hye @sksksk it seems something fishy is affecting the npm package you installed manually .

You might like to use designed webpack or vite tool to kind of configure environment of you app automatically and much easier , just using some script syntax in your computer's terminal command.

1/ try open the terminal command :

 - navigate under the repertory where you want to create your **project in**
 - Do not enter this specific folder, rather do a right click, and choose appearing options **open in Terminal**
 - Wait until the terminal fully open, with cursor beating right after the path link of your directory

2/ Install React using Vite Tool :

- for example , if you choose **vite** you can install the ecosystem of vite , and also at same time react using the command :

npm create vite@latest my-project -- --template react
  • after the end installation type :
cd my-project

3/ Install Tailwindcss using the both command below (one after the other ) :

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

3/ configure basically tailwind.config.js file :

export default {
   content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
}

If something went wrong feel free to reach me.

Hope it could be of one help

Have an amazing day or night @sksksk , teasing project encompassing man technologies like that will undoubtedly improve your skill on fastening your productivity while coding.

Stay Safe and Healthy.

Marked as helpful

1

@sksksk2024

Posted

Thank you, @BeinRain06, for making me reconsider the problem that I had faced for a few months, to make the npm work properly!!! Once I've started with Vite -- and in a new project, it drove me to the problem with npm(but somehow, it maked me think in another perspective). Thanks again, pal, and take care!! πŸ™‹β€β™‚οΈπŸ˜Š

0
Edwin Chengβ€’ 340

@edwinc73

Posted

Hello, The index.html is not set up for the react app. inside the body you should have

<div id="root"> </div>

this is the element the app will be rendered in. without it your react code means nothing.

Then under the #root element add in this script

<{delete this}script type="module" src="/src/index.js">

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord