# Need help in submitting a react project created with node.js

**URL:** <https://forum.freecodecamp.org/t/need-help-in-submitting-a-react-project-created-with-node-js/417385>\
**Category:** General\
**Created:** [August 26, 2020, 4:59pm UTC](https://forum.freecodecamp.org/t/need-help-in-submitting-a-react-project-created-with-node-js/417385 "2020-08-26T16:59:01Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sherw1201](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sherw1201/32/175728_2.png) [@sherw1201](https://forum.freecodecamp.org/u/sherw1201)\
**Post date:** [August 26, 2020, 4:59pm UTC](https://forum.freecodecamp.org/t/need-help-in-submitting-a-react-project-created-with-node-js/417385/1 "2020-08-26T16:59:01Z")

</div>

So i created a project using node.js and i dont know know how to submit it using [codepen.io](http://codepen.io). When i copy the same code from node to my pen in codepen it doesnt render the output. I have included all CDN’s in the codepen settings(react, react-dom). Please help!

```auto
import React from 'react';
import ReactDOM from 'react-dom'
import {Helmet} from 'react-helmet'
import './index.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitterSquare } from "@fortawesome/free-brands-svg-icons"
import { faFacebookSquare } from "@fortawesome/free-brands-svg-icons"
import { faQuoteLeft, faQuoteRight } from "@fortawesome/free-solid-svg-icons"

const mainColor= ["#BDB76B", "#228B22", "#00FA9A", "#808000", "#6B8E23", "#008B8B", "#00BFFF", "#000080", "#7B68EE", "#FF00FF", "#4B0082", "#C71585", "#808080", "#2F4F4F", "#DAA520", "#800000", "#D2691E", "#778899", "#40E0D0", "#F0E68C"];
let index = Math.floor(Math.random()*20);

const QuoteBox = function(props){
    return (
      <div id="quote-box" className="container-fluid">
        <p id="text" style={{color: mainColor[props.randomIndex]}}>
		<FontAwesomeIcon icon={faQuoteLeft}/> {props.quotes[props.randomIndex].quote} <FontAwesomeIcon icon={faQuoteRight}/></p>
        <p id="author" style={{color: mainColor[props.randomIndex]}}>- {props.quotes[props.randomIndex].author}</p>
        <button id="new-quote" className="color" onClick={() => {props.onClick()}} className="btn btn-block" style={{background: mainColor[props.randomIndex]}}>New Quote</button><br/>
        <a id="tweet-quote" href={'https://twitter.com/intent/tweet?text="'+props.quotes[props.randomIndex].quote+'" -'+props.quotes[props.randomIndex].author} className="links" target="_blank">
			<FontAwesomeIcon icon={faTwitterSquare} size="3x" style={{color: mainColor[props.randomIndex]}}/>
		</a>
		<a id="facebook" href="https://www.facebook.com/" className="links" target="_blank">
			<FontAwesomeIcon icon={faFacebookSquare} size="3x" style={{color: mainColor[props.randomIndex]}}/>
		</a>
      </div>
    );
  }

class Main extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			quotes: [
        {quote: 'You either die a hero or live long enough to see yourself become a villain.',
        author: 'Harvey Dent'},
        {quote: 'The greatest glory in living lies not in never falling, but in rising every time we fall.', 
        author: 'Nelson Mandela'},
        {quote: 'The way to get started is to quit talking and begin doing.', 
        author: 'Walt Disney'},
        {quote: "Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma – which is living with the results of other people's thinking.", 
        author: 'Steve Jobs'},
        {quote: 'If life were predictable it would cease to be life, and be without flavor.', 
        author: 'Eleanor Roosevelt'},
        {quote: "If you look at what you have in life, you'll always have more. If you look at what you don't have in life, you'll never have enough.", 
        author: 'Oprah Winfrey'},
        {quote: "If you set your goals ridiculously high and it's a failure, you will fail above everyone else's success.", 
        author: 'James Cameron'},
        {quote: "Life is what happens when you're busy making other plans", 
        author: 'John Lennon'},
        {quote: "Spread love everywhere you go. Let no one ever come to you without leaving happier.", 
        author: 'Mother Teresa'},
        {quote: "When you reach the end of your rope, tie a knot in it and hang on.", 
        author: 'Franklin D. Roosevelt'},
        {quote: "Always remember that you are absolutely unique. Just like everyone else.", 
        author: 'Margaret Mead'},
        {quote: "The best and most beautiful things in the world cannot be seen or even touched - they must be felt with the heart.", 
        author: 'Helen Keller'},
        {quote: "Whoever is happy will make others happy too.", 
        author: 'Anne Frank'},
        {quote: "Tell me and I forget. Teach me and I remember. Involve me and I learn.", 
        author: 'Benjamin Franklin'},
        {quote: "In the end, it's not the years in your life that count. It's the life in your years.", 
        author: 'Abraham Lincoln'},
        {quote: "Many of life's failures are people who did not realize how close they were to success when they gave up.", 
        author: 'Thomas A. Edison'},
        {quote: "Life is never fair, and perhaps it is a good thing for most of us that it is not.", 
        author: 'Oscar Wilde'},
        {quote: "Only a life lived for others is a life worthwhile.", 
        author: 'Albert Einstein'},
        {quote: "The purpose of our lives is to be happy.", 
        author: 'Dalai Lama'},
        {quote: "Love the life you live. Live the life you love.", 
        author: 'Bob Marley'}
      ],
			randomIndex: Math.floor(Math.random()*20)
		}	
	}
	
	
  generateRandomIndex(){
    this.setState({randomIndex: Math.floor(Math.random()*20)});
  }
	
	
	render(){
		return(
			<div>
			<Helmet>
					<style>{'body { background-color:'+ mainColor[this.state.randomIndex]+ '; }'}</style>
			</Helmet>
			
				<QuoteBox quotes={this.state.quotes} randomIndex={this.state.randomIndex} onClick={() => {this.generateRandomIndex()}}/>
			</div>
		)
	}
}

ReactDOM.render(<Main/>, document.getElementById('root'));

```

```auto
<html id="root">
<head>
	
</head>
<html>

```

```auto
@import url('https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Ubuntu:wght@300&display=swap');

#root{
	position: relative;
}

#quote-box{
  margin: 150px 0 0 -225px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 450px;
  border-radius: 8px;
  z-index: 1;
  background: #fff;
}

#text{
	font-family: 'Lora';
    font-size: 25px;
}

#author{
	font-family: 'Lato';
	font-size: 20px;
	text-align: right;
}

#new-quote{
	font-family: 'Ubuntu';
	color: #fff;
}

.links{
	padding: 5px;
}

.fa{
}

```

These are the 3 files (.html, .css, and .js)  
How do i complete this same project in codepen??!

---

<div class="post-metadata">

**Author:** ![miku86](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/miku86/32/95580_2.png) [@miku86](https://forum.freecodecamp.org/u/miku86)\
**Post date:** [August 27, 2020, 7:48am UTC](https://forum.freecodecamp.org/t/need-help-in-submitting-a-react-project-created-with-node-js/417385/2 "2020-08-27T07:48:40Z")

</div>

Hey Sherwin,

nice to meet you! 👋

> [@sherw1201](#):
>
> So i created a project using node.js

Can you elaborate on this? How did you build this NodeJS project?

> [@sherw1201](#):
>
> When i copy the same code from node to my pen in codepen it doesnt render the output.

Would be awesome to see your pen!

Looking forward to seeing your project.

---

<div class="post-metadata">

**Author:** ![sherw1201](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sherw1201/32/175728_2.png) [@sherw1201](https://forum.freecodecamp.org/u/sherw1201)\
**Post date:** [August 27, 2020, 9:52am UTC](https://forum.freecodecamp.org/t/need-help-in-submitting-a-react-project-created-with-node-js/417385/3 "2020-08-27T09:52:43Z")

</div>

Hey @miku86! Thanks for the reply.  
So basically I installed all the required packages (react, react-dom, bootstrap, font-awesome etc.) using the npm package manager.

Then this is how i imported them into my JavaScrpitFile:

```auto
import React from 'react';
import ReactDOM from 'react-dom'
import {Helmet} from 'react-helmet'
import './index.css'
import 'bootstrap/dist/css/bootstrap.min.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTwitterSquare } from "@fortawesome/free-brands-svg-icons"
import { faFacebookSquare } from "@fortawesome/free-brands-svg-icons"
import { faQuoteLeft, faQuoteRight } from "@fortawesome/free-solid-svg-icons"

```

But apparently import doesn’t work in [codepen.io](http://codepen.io).  
So i tried using the cdn links in the settings of JavaScript  
It still doesnt work though

This is what my original project looks like when i first created it with node.js and it works just fine as i want it to

 ![Screenshot (4)](https://global.discourse-cdn.com/freecodecamp/original/3X/6/a/6a12d623bfaaa4a5c76f4d2591f734243dd09ec4.png)  
Now i just wanna know how i can implement the same in codepen so that i can submit it on FreeCodeCamp

> [@miku86](#):
>
> Would be awesome to see your pen!
> 
> Looking forward to seeing your project.

This is my [Pen](https://codepen.io/sherwin1201/pen/wvGdwBO) so far…

---

<div class="post-metadata">

**Author:** ![miku86](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/miku86/32/95580_2.png) [@miku86](https://forum.freecodecamp.org/u/miku86)\
**Post date:** [August 27, 2020, 1:23pm UTC](https://forum.freecodecamp.org/t/need-help-in-submitting-a-react-project-created-with-node-js/417385/4 "2020-08-27T13:23:24Z")

</div>

Alright, so you used npm to add the packages.

For React projects, I would use [codesandbox](https://codesandbox.io/s/) and use the `React` Template in the `Explore Templates` section.

Then, you can click on `Add dependency` on the left section of your project to add packages like you would do withi node/npm.

If you got your project on Github, you can even create your project from there.

---

<div class="post-metadata">

**Author:** ![sherw1201](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sherw1201/32/175728_2.png) [@sherw1201](https://forum.freecodecamp.org/u/sherw1201)\
**Post date:** [August 27, 2020, 3:07pm UTC](https://forum.freecodecamp.org/t/need-help-in-submitting-a-react-project-created-with-node-js/417385/5 "2020-08-27T15:07:10Z")

</div>

Appreciate the reply! So i used codesandbox and got my original project working as i wanted . Thanks alot  
[https://87wnw.csb.app/](https://87wnw.csb.app/)  
Can i submit this project on free code directly from codesandbox? And if i can how do i do it?

---

<div class="post-metadata">

**Author:** ![sherw1201](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sherw1201/32/175728_2.png) [@sherw1201](https://forum.freecodecamp.org/u/sherw1201)\
**Post date:** [August 27, 2020, 6:30pm UTC](https://forum.freecodecamp.org/t/need-help-in-submitting-a-react-project-created-with-node-js/417385/6 "2020-08-27T18:30:12Z")

</div>

> [@sherw1201](#):
>
> Can i submit this project on free code directly from codesandbox? And if i can how do i do it?

Hey! I figured it out. Thanks alot for suggesting codesandbox! Henceforth I’ll use this for my FCC Projects.  
One last thing, how to run the tests with `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js` . It doesn’t appear in codesandbox like how it does for the projects in codepen

---

<div class="post-metadata">

**Author:** ![miku86](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/miku86/32/95580_2.png) [@miku86](https://forum.freecodecamp.org/u/miku86)\
**Post date:** [August 28, 2020, 6:21am UTC](https://forum.freecodecamp.org/t/need-help-in-submitting-a-react-project-created-with-node-js/417385/7 "2020-08-28T06:21:13Z")

</div>

Hey there,

yeah, that’s a little bit confusing,  
you have to add it here:

![Screenshot_2020-08-28_08-19-22](https://global.discourse-cdn.com/freecodecamp/original/3X/9/9/994ba3a0b786978f9ef114dfee1d8a12b4b360ba.png)

---

<div class="post-metadata">

**Author:** ![sherw1201](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sherw1201/32/175728_2.png) [@sherw1201](https://forum.freecodecamp.org/u/sherw1201)\
**Post date:** [August 28, 2020, 6:49am UTC](https://forum.freecodecamp.org/t/need-help-in-submitting-a-react-project-created-with-node-js/417385/8 "2020-08-28T06:49:41Z")

</div>

Thanks alot! It worked.  
I also tried adding it in `<Helmet>` in the React Component and it worked fine there too 👍

```auto
<Helmet>
    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
	<style>{'body { background-color:'+ mainColor[this.state.randomIndex]+ '; }'}</style>
</Helmet>

```

Anyway thanks alot for the help. Appreciate it 👍 😊

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:41pm UTC](https://forum.freecodecamp.org/t/need-help-in-submitting-a-react-project-created-with-node-js/417385/9 "2021-06-01T18:41:52Z")

</div>

Closed on June 1, 2021, 6:41pm UTC