BALEN an App that explore you to coding resources and meet other devs around the world

About the app

this is an application that explore to some learning resources , which you will find very lovely to us . it has an interactive bot which gives your some learning sites , base on web development ( Front end , Back end ) and also machine learning , you can meet and connect with new developers , and also see some list of trending articles

PROBLEMS FACED

power problem

Data problem

Deployement problem

WHAT I LEARNT DURING THE PROCESSS

Patience

How firebase works with react

deploying CRA to vercel even with lots of warning

Creation process

the project is created with React.js using CRA ( Create react application )

now lets take a walk through the building process , now open your terminal , cd into the folder you wanna create the app in

npx create-react-app app_name

and this will create the new react app with everything

DEPENDENCIES

now for the project i used some list of dependencies , i used REACTSTRAP for the styling UI and Sass for my default styling this are some list og dependencies as follows

LIST OF DEPENDENCIES

React router dom // used for routing

ReactStrap // used for the UI framework

ReactIcons // dependency used to add the Icons to the app

Firebase // i used it as for my database

setting everything up

now lets talk about the routing to use routing in react js just open your terminal in your root folder and type

npm install react-router-dom --save

this will install the router to your app

now by using import all the pages you wanna use and link the, to each other as shown in the image below

API USED

i used the DevTo.api to get some list of developers

ABOUT THE DATABASE USED !

i used Firebase storage ( firestore ) for the project , i used it collect list of uploaded items

STEPS

now go to Firebase official site

now create and account with firebase

then goto console and choose firebase storage

CREATING THE LEARNING BOT

this is how the bot is being created with js

 import React, {useState} from 'react';
import { Container , Form , Row , Col , Button  , Input} from 'reactstrap';
import './css/main.css';

import {MdArrowBack} from "react-icons/md";
import {RiSendPlane2Fill} from "react-icons/ri";
import {Link } from 'react-router-dom';
import {MdSettings} from 'react-icons/md'
import social from '../vectors/social.svg'

const Bot=()=>{

    //function for the bot 
    let [ask , setAsk]=useState('')
    let [hide ,setHide ]=useState('none')
    let [chaty,setChaty]=useState('')
    let [machine , setMachine]=useState('none')
    let [details , setDetails]=useState('block')
       let run=()=>{
            setAsk(localStorage.getItem('name'))

       }

       window.addEventListener('load',()=>run())
    const {  inbox ,btn,app,res }={
        dat:document.querySelector('.userMsg'),
        reply:document.querySelector('.reply'),
        inbox:document.querySelector('.inbox'),
        btn:document.querySelector('#btn'),
        app:document.querySelector('.msgs'),
        res:document.querySelector('.res'),
        clear:document.querySelector('#chat')
    }

        // the bot reply 
        const botReply=(asap)=>{
            let hello=document.createElement('p');
            let wr=document.createTextNode(asap)

             hello.appendChild(wr)
             app.appendChild(hello)
             hello.classList.add('red')


         }

         //human msg
         const  human=(chat)=>{
             let make=document.createElement('div')
             let write=document.createTextNode(chat);
             make.appendChild(write)
             //now append the msg to the div
             app.appendChild(make)

             make.classList.add('mess')

         }

    const user=()=> {
        //the msg button click
        btn.onclick= e=> {
            let val=inbox.value;
                if(val.length!==0) {
                    human(inbox.value)   
                    let mail=/[a-zA-Z0-9]gmail\.com/
                    //set the input box back to empty


                    setTimeout(()=>{

                        if(val.match(mail)) {
                            const rep=['thank you for providing your email address i have sent you a msg via email','thanks for providing your mail check you inbox']
                            const rad=rep[Math.floor(Math.random()*rep.length)];
                                botReply(rad)
                        }else if(val.match(/hi|hey|whats up/)){
                            botReply('lets get to work')
                        } else {
                            const msg=['i am very gathering some resources for you at the moment, to see it click on the buttons below ',' click the buttons   below to see some learning resources '];
                                const randi=msg[Math.floor(Math.random()*msg.length)]
                            botReply(randi)
                            setHide('none')
                        }

                    },2000)


                    //return the value of the input back to empty
                    inbox.value=''
                } else {
                    alert('this box cant be empty')
                }
        }
    }


    //handle the chat buttom 
    let clean= e => {


    let val=e.target.value;
      //now see the state of the form to show 

      setHide('block')

      //now show the message to the screen
       human('I wanna chat with you  ')
      setTimeout(()=>{
        botReply('great nice to chat with you , but before we start chatting , i will like to know your name ')
        setChaty('none')

        },1500)



  }
  //end of handle 
  //code resources part 
  const resource=e=>{
      human('i want some coding resources ')
    /* first of all hide the details of the first button and show the contents of the second buttons  */
        setDetails('none')
        setMachine('block')
      const give=['wow great , learning is always cool , place click on the kind field you want below ',' wow we both can learn together click the buttons below to choose the field you want resources on ']
        const dis=give[Math.floor(Math.random()*give.length)];
        //now display it as the bot reply 
        setTimeout(()=>botReply(dis),1500)
    }

//back end
 const back=()=>{
     human('i need back end resources ');
     const bak=['processing your request pleasae wait for some time ','please wait , be patient'];
        const ra=bak[Math.floor(Math.random()*bak.length)]
        setTimeout(()=>  botReply(ra),1500)
        setTimeout(()=>{
            botReply('i will redirect you in a moment ')
        },4200 )
        setTimeout(()=>{
            const urls=['https://webdevscom.github.io/resources','https://www.codecademy.com/learn/learn-node-js','https://educative.io','https://mdn.com'];
            let vise=urls[Math.floor(Math.random()*urls.length)];
            window.location=`${vise}`;
           },5000)
    }

    //front end developement
    const front=()=>{
        human('i need front end resources ');
        const bak=['prossing your request pleasae wait for some time ','please wait , be patient'];
           const ra=bak[Math.floor(Math.random()*bak.length)]
           setTimeout(()=>  botReply(ra),1500)
           setTimeout(()=>{
               botReply('wait i will redirect you now ')


           },4200 )
           setTimeout(()=>{
            const urls=['https://webdevscom.github.io/resources','https://freecodecamp.com','https://hahnode.com','https://educative.io','https://developer.mozilla.org/en-US/','https://frontendmasters.com/'];
            let vise=urls[Math.floor(Math.random()*urls.length)];
            window.location=`${vise}`;
           },5000)
       }

       //resoources on AI 
       const ai=()=>{
        human('i need resources on AI ( ML and DL)');
        const bak=['prossing your request pleasae wait for some time ','please wait , be patient'];
           const ra=bak[Math.floor(Math.random()*bak.length)]
           setTimeout(()=>  botReply(ra),1500)
           setTimeout(()=>{
               botReply(`resource URL is loading `) 
           },4200 )
           setTimeout(()=>{
            const urls=['https://cloud.google.com/training/machinelearning-ai','https://webdevscom.github.io/resources','https://webdevscom.github.io/resources/103','https://towardsdatascience.com/beginners-learning-path-for-machine-learning-5a7fb90f751a?gi=14206448e123','https://www.bitdegree.org/learning-path/machine-learning'];
            let vise=urls[Math.floor(Math.random()*urls.length)];
            window.location=`${vise}`;
           },5000)

       }
    return (

        <div className="rw">
            <Row>
                <Col className="col-12 col-md-6 col-xl-6 social_cover">
                    <div className="social_image">
                        <img src={social} alt="social  icon" className='vec'/>

                    </div>

                </Col>
                <Col className="col-12 col-md-6 col-xl-6">

                        {/* the chat space */}
                    <header className="top">
                            <div>
                                <span>
                                    <h2>
                                       <Link to="/parent">
                                          <MdArrowBack/>
                                        </Link>

                                    </h2>


                                </span>
                                <h6>{ask}</h6>
                                <span>
                                      <h4 style={{cursor:'pointer'}}><MdSettings/></h4>

                                </span>
                            </div>
                    </header>
                    <Container>
                        <div className="ova">
                        <div className="botMsg">
                            <small>Hello i am BALEN your new friend , so what do you want me to do for you today?</small>
                        </div>
                            <div className='go'>
                            <div>
                                    <div className="msgs">
                                </div>
                                <div className="res">
                                </div>
                            </div>
                            </div>



                            <footer>

                                <div className="inside">
                                <div className="ml" >
                                    <div style={{display:details}}>
                                    <span className="details" >
                                          <Button className="mr-2" color="info" onClick={()=>window.open('https://javascript-minifier.com/', '_blank')} >  Minify code  </Button>
                                          <Button className="mr-2" color="info" onClick={resource}> Code resource </Button>
                                          <Button id="chat" onClick={clean} style={{display:chaty}} color="info">Chat with me </Button>

                                  </span>
                                    </div>

                                  <div style={{display:machine}} className="text-center " >
                                    <div className="line">
                                        <Button className="mr-2" onClick={back}>Back end </Button>
                                      <Button className="mr-2" onClick={front}>Front End </Button>
                                      <Button className="mr-2" onClick={ai}>MLH</Button>
                                    </div>
                                  </div>
                              </div>

                              <Form onSubmit={e=>e.preventDefault()} style={{display:hide}} className="foot">
                                  <Input className="inbox"/>          
                                 <h5> <RiSendPlane2Fill onClick={user} id="btn"/></h5>
                                  {/* <button id="btn" onClick={user} >click</button>                */}
                                </Form>
                                </div>
                          </footer>
                        </div>


                    </Container>


                </Col>
            </Row>
        </div>
    )

}
export default Bot;

you can see in the code above i used Regular expression to match for a good Gmail pattern ..

CREATING THE UPLOAD WITH FIREBASE

we will see how i used firebase to create the user upload

import React, { useState, useEffect } from 'react';
import {MdArrowBack} from "react-icons/md";
import {Link} from 'react-router-dom'
import { Container  , Card , Badge ,CardBody,BreadcrumbItem,Breadcrumb} from 'reactstrap'
import firebase from './firebase'
const Share=()=>{
    let [upload , setUpload]=useState('')
    let [msg , setMsg]=useState('')
    let [size_msg , setSize_msg]=useState('')
    let uploadTo=(e)=>{
        let file=e.target;
        let fileTo=file.files[0];
        let fileNames=fileTo.name;
            //let match for the pattern 
            let pattern=new RegExp(/\.pdf/)
                if(fileTo.name.match(pattern)){
                    //set the error msg back to normal
                    setMsg(false)

                    //now set the msg for the uploaaded files 
                    setUpload(fileTo.name)
                    let storageRef=firebase.storage().ref(`uploads/${fileNames}`)
                    let store=storageRef.put(fileTo)
                    console.log(store);
                    store.on('state_change',snapshot=>{
                        console.log('uploaed to firebase ');
                    })

                    //now upload to firebase 


                } else {
                   setMsg('only PDF files can be uploaded ')
                   setUpload(false)
                }

    }
    return (
        <>

            <Container>
            <header>
                <div>
                    <span>
                        <Link to="parent">
                             <MdArrowBack/>
                        </Link>
                        <Breadcrumb>
                            <BreadcrumbItem>
                            <small className="text-muted">share your your learning resources with firends </small>
                            <small className="text-muted">share your your learning resources with firends </small>
                            <small className="text-muted">share your your learning resources with firends </small>
                            </BreadcrumbItem>
                        </Breadcrumb>
                    </span>

                </div>
            </header>

            {/* next part for the uploaded files  */}
            <div className="uploads">
                <small className="text-muted">List of uploaded files </small>
                <br/>





                <hr/>

            </div>
          <footer className="foot">
          <div className="errors">
                  <small className="err"> {msg}</small>
                  <small className="loadMsg">{upload}</small>
                </div>
          <div className="upload-btn" >
                <form action="" onSubmit={e=>e.preventDefault()}>
                   <label htmlFor="pdf">+</label>
                    <input type="file" name="load" id="pdf" style={{display:'none'}} onChange={uploadTo}/>


                </form>
                <br/>

             </div>
          </footer>
            </Container>

        </>
    )
}
export default Share ;

in the code snippet above , you can see i imported firebase i will show how to use firebasae with react.js

USING FIREBASE WITH REACT

first of all go to firebase , create an account with them

nos choose firebase storage

now create a firebase project then click on web

now create a new file and name it firebase.js

now collect your project id and secrete key as shown below

then export firebase as default

 import firebase from 'firebase'
import "firebase/firestore"
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "your api key here",
    authDomain: "authDomain",
    projectId: "project domain",
    storageBucket: "storage bucket",
    messagingSenderId: "your message sender ID",
    appId: "appId",
    measurementId: "measurement"
  };
  firebase.initializeApp(firebaseConfig);
//now export firebase 
  export default firebase;

you can see in the above we imported firebase to our file now you can start importing firebase anywhere in your app also we used firebase to match the file upload type