Build a MERN stack portfolio

 Build a MERN stack portfolio.

 

1. Create a Folder with name "Portfolio" and open it with VS code.
2. In VS code Open VS code Terminal by pressing CTRL + Back Trick.
3. in Terminal type "npx create-react-app client"
   with above command we create a react app with folder name Client.
4. Now go to Client folder, and type npm start. it will open browser and show react.
5. Now go to Client folder and under src folder create a folder name 'components' and components create home.js/footer.js/contact.js/playlist.js/header.js/about.js.
   
6. now go to home.js file and type rafce and enter it will auto complete below code.
   
   
    

       import React from 'react'

   
   

       export const home = () => {

       return (

           <div>home</div>

       )

       }

   
   
   
   
   do rafce with all files that you recently created.
    
7.  now go to app.js file and remove below code.
   
   
       <div className="App">

         <header className="App-header">

           <img src={logo} className="App-logo" alt="logo" />

           <p>

             Edit <code>src/App.js</code> and save to reload.

           </p>

           <a

             className="App-link"

             href="https://reactjs.org"

             target="_blank"

             rel="noopener noreferrer"

           >

             Learn React

           </a>

         </header>

       </div>
   
   and type below code and see on browser showing Hello world.
   
   
       <>

       Hello world

       </>
   
   
   
   
   
8. At first we create Header part. and first we go to react bootstrap and copy the command and paste it on vs code terminal. Below is a code.
   

   npm install react-bootstrap bootstrap

9. Now import CSS file from react bootstrap site. below is CSS code to import. import below code on app.js file.
   

   import 'bootstrap/dist/css/bootstrap.min.css';

10. now open again react app using the command "npm start"
11. Now we start to making the Header. go to app.js file and import header from './components/header';
    
12. Paste below code into header.js file
    
    
        import React from 'react'

    
    

        const Header = () => {

        return (

            <div>Header</div>

        )

        }

    
    

        export default Header
13. Now go to navbar on react bootstrap site. and copy a navbar for header that you like.Z
    copy below code for navbar and paste into header.js file.
    
    import Container from 'react-bootstrap/Container';
    import Nav from 'react-bootstrap/Nav';
    import Navbar from 'react-bootstrap/Navbar';
    
    
    Also paste below code...
    
    
     

            <>

                <Navbar bg="dark" variant="dark">

                    <Container>

                        <Navbar.Brand href="#home">Navbar</Navbar.Brand>

                        <Nav className="me-auto">

                            <Nav.Link href="#home">Home</Nav.Link>

                            <Nav.Link href="#features">Features</Nav.Link>

                            <Nav.Link href="#pricing">Pricing</Nav.Link>

                        </Nav>

                    </Container>

                </Navbar>

            </>

     
    
    Now remove "me-auto" above code.
    
    
    Now go to the browser and see the difference.
    
    
14.  below are the code till now.
    
    
        import React from 'react'

    
    

        import Container from 'react-bootstrap/Container';

        import Nav from 'react-bootstrap/Nav';

        import Navbar from 'react-bootstrap/Navbar';

        import Button from 'react-bootstrap/Button';

    
    

        const Header = () => {

            return (

                <>

                    <Navbar bg="dark" variant="dark">

                        <Container>

                            <div>

                                <h2 className='mt-2 h2_right' style={{color:"#6c63ff"}}>

                                <Nav.Link href="#home" style={{color: 'white'}}>sayed Aminul</Nav.Link>

                                </h2>

                            </div>

                            <Nav className="">

                                <div>

                                <Nav.Link href="#home">Home</Nav.Link>

                                <Nav.Link href="#features">Projects</Nav.Link>

                                <Nav.Link href="#pricing">About Me</Nav.Link>

                                <Nav.Link href="#pricing">Contact</Nav.Link>

                                </div>

                                <div>

                            {/* add a button here */}

                            <Button variant="success">Resume</Button>{' '}

                                </div>

                            </Nav>

                        </Container>

                    </Navbar>

                </>

            )

        }

    
    

        export default Header

    
    
    
    
    
    
    
15. now stop the server and run 'npm i react-router-dom' and restart server now.
    
16. now go to index.js and import below code:
    
    
     

    import {BrowserRouter} from 'react-router-dom';

     
17. make index.js file like below
    
    
      import React from 'react';

      import ReactDOM from 'react-dom/client';

      import './index.css';

      import App from './App';

    
    

      import {BrowserRouter} from 'react-router-dom';

    
    
    

      const root = ReactDOM.createRoot(document.getElementById('root'));

      root.render(

        <BrowserRouter>

          <App />

        </BrowserRouter>

      );

    
    
    
    
    
    
    
18.