⚡ Ionic React Planning

• App using Ionic with React to store a list of projects.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic React Planning
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup * Development
  • 💾 Setup * Build, Android Studio
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• List of projects from dropdown list of javascript frameworks

📷 Screenshots

📶 Technologies

• Ionic/React v5 used to create app

• React v17 JavaScript library

• Capacitor crossplatform app runtime

• React Dev Tools Chrome extension to help with debugging etc.

• Ionic Grid

• Ion Cards

• Ion Segment

• Ion Modal

• Ion Icons

• React Context to pass data down the component tree

• React Hook State to use state

💾 Setup * Development

• Install dependencies using npm i
• Run ionic serve to open the dev server at http://localhost:8100/

💾 Setup * Build, Android Studio

• Run ionic build to create build files
• If you don't have it already then Install Android Studio (on Windows 10 in my case * see 'Inspiration' for helpful video)
• Connect mobile device to Android Studio via USB. To go into dev mode on Realme 5 Pro mobile phone connected via USB to Android: Go to 'About Phone'/'Version Baseband & Kernal' in phone settings then click 7 times on 'Version' and enter phone access code. Go to Settings/Additional Settings/Developer options and enable 'USB debugging'

💻 Code Examples

• pages/AllProjects.tsx Ion grid to show list of projects

<IonGrid>
 {projectsCtxt.projects.map((project) => (
       <IonRow key={project.id}>
        <IonCol className="ion-text-center">
         <IonCard>
          <img src={project.imageUrl} alt="Project" />
          <IonCardHeader>
           {/* <IonCardTitle>{project.time}</IonCardTitle> */}
           <IonCardTitle>{project.title}</IonCardTitle>
          </IonCardHeader>
          <IonCardContent>
           <p>{project.description}</p>
           <IonItem lines="none">
            {!project.isFinished ? (
             <IonRow className={classes.CenterElement}>
              <IonButton color="warning">
               <IonIcon icon={pencil} />
              </IonButton>
              <IonButton
               onClick={() => openFinishedModal(project)}
              >
               <IonIcon icon={checkmarkOutline} />
              </IonButton>
             </IonRow>
            ) : (
             <IonIcon
              color="success"
              className={classes.CenterElement}
              icon={checkmarkOutline}
             />
            )}
           </IonItem>
          </IonCardContent>
         </IonCard>
        </IonCol>
       </IonRow>
  ))}
</IonGrid>

🆒 Features

• Side navigation drawer

📋 Status & To Do List

• Status: Working. Do not update dependencies.
• To-Do: Improve side menu - add pages?, change project complete button add more project types, change time to createdAt in footer? Add backend storage.

👏 Inspiration

None

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com