JavaScript My React Portfolio

[Grynn]

Hi I'm brand new to you this site and relatively new to web dev world.
I graduated from my boot camp (shout out to General Academy) in April. And I've been feeling progressing less imposter syndromeyyy as i am beginning to feel this wonderful wonderfullness about myself progressively and forwardly more and more since that day

Until now
Below is the link to my GitHub repo and The Replit
I attempted it to deploy with as well..

The problem is this when I serve locally to $3,000 or whatever I see my site

when I DEPLOY and go to the hosted link I see the... "react modify SRC/app.js and save to refresh " or whatever ... help?

GitHub - Iansogotthis/PortyFolio

Contribute to Iansogotthis/PortyFolio development by creating an account on GitHub.

github.com

PortyFolio

Run code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter.

replit.com

 

[Johna]

Hey there.
The code in the GitHub link and Replit link is different. I believe what's on your dev server is what's on GitHub, and what you're deploying is the code on Replit.

 

[Grynn]

Hey there.
The code in the GitHub link and Replit link is different. I believe what's on your dev server is what's on GitHub, and what you're deploying is the code on Replit

Ik the two code are different ... the replit was my expended attempt on the original repo after GitHub pages didn't even work...
That said I assume you're probably right
Can you elaborate?

 

[Johna]

Where is your site deployed? From Replit or from GitHub?

 

[Grynn]

'Iansgotthis.github.io/PortyFolio'
And
porty-folio-IanMount.replit.app

 

[Grynn]

Where is your site deployed? From Replit or from GitHub?

'Iansgotthis.github.io/PortyFolio'
And
'porty-folio-IanMount.replit.app'

 

[Johna]

The first link is a broken link. I believe you meant to link Iansogotthis.github.io/PortyFolio. The corrected link shows a blank white page, and when looking in the console, there are multiple 404 errors:

These 404 errors are occurring because the homepage you set in your package.json isn't the same as your actual homepage, so the website is trying to find the generated JS and CSS on your set homepage, which of course doesn't exist (404 error). You have to change your homepage value to https://iansogotthis.github.io/PortyFolio/ to fix the error.

In the second link, it shows what you described; "Edit src/App.js and save to reload."
This is expected because that's exactly what your code on Replit is. It seems you've updated the code on GitHub, but not on Replit. I would recommend just sticking to one of these to avoid issues with un-synced code.


Also, this is really up to you, but for the sake of readability, I strongly encourage you not to write your jsx code in the format you've done in App.js:

// src/App.js
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Nav from './components/Nav';
import Footer from './components/footer';
import './styles.css';

const Home = lazy(() =>
    import ('./pages/Home'));
const About = lazy(() =>
    import ('./pages/About'));
const Projects = lazy(() =>
    import ('./pages/Projects'));
const Contact = lazy(() =>
    import ('./pages/Contact'));

function App() {
    return ( <
        Router >
        <
        div className = "app-container" >
        <
        Nav / >
        <
        Suspense fallback = { < div > Loading... < /div>}> <
            Routes >
            <
            Route path = "/"
            element = { < Home / > }
            /> <
            Route path = "/about"
            element = { < About / > }
            /> <
            Route path = "/projects"
            element = { < Projects / > }
            /> <
            Route path = "/contact"
            element = { < Contact / > }
            /> <
            /Routes> <
            /Suspense> <
            Footer / > { /* Footer included here */ } <
            /div> <
            /Router>
        );
    }

    export default App;

Instead, a much more readable format would look something like this:

// src/App.js
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Nav from './components/Nav';
import Footer from './components/footer';
import './styles.css';

const Home = lazy(() => import ('./pages/Home'));
const About = lazy(() => import ('./pages/About'));
const Projects = lazy(() => import ('./pages/Projects'));
const Contact = lazy(() => import ('./pages/Contact'));

function App() {
    return (
        <Router>
            <div className="app-container">
                <Nav />
                <Suspense fallback={<div>Loading...</div>}>
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/about" element={<About />} />
                        <Route path="/projects" element={<Projects />} />
                        <Route path="/contact" element={<Contact />} />
                    </Routes>
                </Suspense>
                <Footer /> {/* Footer included here */}
            </div>
        </Router>
    );
}

export default App;

 

[Grynn]

\

Also, this is really up to you, but for the sake of readability, I strongly encourage you not to write your jsx code in the format you've done in App.js:

// src/App.js
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Nav from './components/Nav';
import Footer from './components/footer';
import './styles.css';

const Home = lazy(() =>
    import ('./pages/Home'));
const About = lazy(() =>
    import ('./pages/About'));
const Projects = lazy(() =>
    import ('./pages/Projects'));
const Contact = lazy(() =>
    import ('./pages/Contact'));

function App() {
    return ( <
        Router >
        <
        div className = "app-container" >
        <
        Nav / >
        <
        Suspense fallback = { < div > Loading... < /div>}> <
            Routes >
            <
            Route path = "/"
            element = { < Home / > }
            /> <
            Route path = "/about"
            element = { < About / > }
            /> <
            Route path = "/projects"
            element = { < Projects / > }
            /> <
            Route path = "/contact"
            element = { < Contact / > }
            /> <
            /Routes> <
            /Suspense> <
            Footer / > { /* Footer included here */ } <
            /div> <
            /Router>
        );
    }

    export default App;

Instead, a much more readable format would look something like this:

// src/App.js
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Nav from './components/Nav';
import Footer from './components/footer';
import './styles.css';

const Home = lazy(() => import ('./pages/Home'));
const About = lazy(() => import ('./pages/About'));
const Projects = lazy(() => import ('./pages/Projects'));
const Contact = lazy(() => import ('./pages/Contact'));

function App() {
    return (
        <Router>
            <div className="app-container">
                <Nav />
                <Suspense fallback={<div>Loading...</div>}>
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/about" element={<About />} />
                        <Route path="/projects" element={<Projects />} />
                        <Route path="/contact" element={<Contact />} />
                    </Routes>
                </Suspense>
                <Footer /> {/* Footer included here */}
            </div>
        </Router>
    );
}

export default App;

Truth and... {low key side questing here but is kinda big deal} thank you for confirming my suspicions on that... Point of Order lol... i realized that by the mid point in labor when vs code kept trying to auto format weirdly... but i didnt trust my assessment of the events implications or really even have enough faith in my own credibility ... or skill... and did nothing about it...
but next time... due in major part to your hat tip comment here... i will be trusting my own gut a bit more...
Truly appreciated... as was your attentive clearly illustrated help.
5*