formatting

client/src/App.js

@@ -10,13 +10,21 @@ import Footer from './components/footer';
 
 export default function App() {
     return (
+
         <div className='d-flex flex-column min-vh-100'>
+
             <NavBar/>
+
             <Routes>
+
                 <Route path='/' element={<Home/>}/>
+
                 <Route path='/About' element={<About/>}/>
+
             </Routes>
+
             <Footer/>
+            
         </div>
     );
 }

client/src/components/cardHolder.js

@@ -3,13 +3,15 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 
 export default function CardHolder(props) {
-
     return(
         <Container fluid className="bg-dark">
+
             <Row className="d-flex flex-row justify-content-center align-items-center py-3">
+                
                 {props.children}
+            
             </Row>
+
         </Container>
     );
-
 }

client/src/components/characterCard.js

@@ -10,27 +10,44 @@ export default function CharacterCard(props) {
     const lastEpisode = props.character.lastEpisode;
     
     return(
-
         <Card style={{ width: '22rem' }} className='p-1 m-3'>
+            
             <Card.Img variant='top' src={image} width='100%' />
+            
             <Card.Body>
+                
                 <Card.Title>{characterName}</Card.Title>
+                
                 <Card.Text>
+                    
                     <Table>
+                        
                         <tbody>
+                            
                             <tr>
+                                
                                 <td className='fw-bold'>First Episode:</td>
+                                
                                 <td>{firstEpisode}</td>
+                            
                             </tr>
+                            
                             <tr>
+                                
                                 <td className='fw-bold'>Last Episode:</td>
+                                
                                 <td>{lastEpisode}</td>
+                            
                             </tr>
+                        
                         </tbody>
+                    
                     </Table>
+                
                 </Card.Text>
+            
             </Card.Body>
+        
         </Card>
-
     );
 }

client/src/components/footer.js

@@ -1,7 +1,9 @@
 import React from 'react';
+
 import { Github } from 'react-bootstrap-icons';
 import { Globe } from 'react-bootstrap-icons';
 import { Envelope } from 'react-bootstrap-icons';
+
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
@@ -17,9 +19,13 @@ export default function Footer() {
                 <Row>
 
                     <Col className='text-start'>
+
                         <span>
+
                             <span className='highlight'>criminal</span>mindsapi &#169; 2022
+                        
                         </span>
+
                     </Col>
 
                     <Col className='text-end'>

client/src/components/greeting.js

@@ -4,7 +4,6 @@ import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 
 export default function Greeting() {
-
     return (
         <Container>
 
@@ -34,5 +33,4 @@ export default function Greeting() {
             
         </Container>
     );
-
 }

client/src/components/loading.js

@@ -5,11 +5,13 @@ import Col from 'react-bootstrap/Col';
 import { TailSpin } from 'react-loading-icons';
 
 export default function Loading() {
-
     return (
         <Container className='m-auto'>
+
             <Row>
+
                 <Col className='text-center'>
+
                     <TailSpin
                         height='3em'
                         fill='#912718'
@@ -19,10 +21,13 @@ export default function Loading() {
                         strokeOpacity={1}
                         strokeWidth={2}
                     />
+
                      <div className='mt-2'>Loading...</div>
+
                 </Col>
+
             </Row>
+
         </Container>
     );
-
 }

client/src/components/navbar.js

@@ -5,7 +5,6 @@ import { NavLink } from 'react-router-dom';
 import Container from 'react-bootstrap/Container';
 
 export default function NavBar() {
-
     return (
         <Navbar
             expand='sm'
@@ -62,5 +61,4 @@ export default function NavBar() {
             
         </Navbar>
     )
-
 }

client/src/index.js

@@ -8,9 +8,13 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
   <React.StrictMode>
+
     <BrowserRouter>
+
       <App />
+
     </BrowserRouter>
+    
   </React.StrictMode>
 );
 

client/src/pages/about.js

@@ -13,7 +13,13 @@ export default function About() {
 
         return sections.map(section => {
 
-            return <AboutSection section={section}/>
+            return (
+
+                <AboutSection 
+                    section={section}
+                />
+
+            );
 
         });
 
@@ -27,7 +33,7 @@ export default function About() {
 
                 <Col>
 
-                    <h1 className='text-center py-4'>Wanna know more?</h1>
+                    <h1 className='text-center py-4'>Wheels up...</h1>
 
                 </Col>
 

client/src/pages/home.js

@@ -48,10 +48,15 @@ export default function Home() {
     return (
         <>
             <Greeting />
+
             {characters.length > 0 ?
+
                 <CardHolder>
+
                     {getCharacterCards()}
+
                 </CardHolder>
+                
                 : <Loading />}
         </>
     );