This is a SPA build for a fictional cat shelter using Angular CLI, Ionic and Firebase. The page offers the user the opportunity to browse, add, delete and update cats from a made-up shelter database of homeless cats.
Warning!
As of 09/02/24 the deployed page won't let users perform any HTTP requests, and therefore won't be able to properly access the main page functionalities (you'd still be able to auth and view the homepage, though). The reason behind this decision is that I have tweaked Firebase's rules so the database can't be accessed due to some security reasons related to Google API keys. However, the demo video could still show you the main page's functionality. Nonetheless, please do not hesitate to drop me a message if you're keen to check it out live so I activate the DB for you - it's still possible, and the page is completely secured for users to use.
Demo video | Trello board | Presentation | Deployed page
- Wireframes and Project Management
- Setup
- Technologies Used
- Components and Pages Structure
- Main Functionalities and Characteristics
- Future Work
- Resources
- Team Members
Besides using some breathtaking amount of pen and paper, I used Miro and Trello to create wireframes and to project manage. This significantly aided me in getting this project done in less than 45h.
Wireframe
Task management
Open Git Bash in your local machine, change the current working directory to the location where you want the cloned directory. Type git clone /~https://github.com/asm-dev/ionic-final-project.git, press enter and voilà.
Go to the directory of this project. You can do this by using cd and the name of the cloned repo directory or by manually finding the directory and running Git Bash there. You'd then need to run npm install, and once that NPM is installed you're good to use ionic serve. Once Ionic serve is done, you shall be able to view the project here http://localhost:8100/
Languages and frameworks
- TypeScript
- JavaScript
- HTML
- SCSS
- Angular
- Ionic
Deployment and control system
- Git
- GitHub
Additional tools
- Miro
- Trello
- Firebase
- Google API
- VSC
The main folder you should take a look at to understand how the app is structured is /src. There you will find:
/appstores the pages and components./authcontains the files to set up the authentication system,/catsthe pages and components that refer to "Browse Cats" and "Your Cats", including the "Cat Details" page.homerefers to the homepage,errorto the error page,/shared/modelsstores our cat.model.ts file and lastly inutilsyou'll find the custom validators used in the page's forms./assetscontains the images, audios and icons./environmentshere you can find our API keys./themeincludes some styling settings.
- Clean, modular and efficient code.
- State Management. RxJS Subjects are dynamic and store data generated both locally and from API calls.
- Users can perform a variety of CRUD operations thanks to Observables and RXJS.
- Efficient storage and retrieval of the data. The app communicates with a Firebase Realtime Database that acts as REST API.
- Frontend validation with robust error handling.
- Highly curated, logical and well-thought-out component architecture.
- Ease of navigation. Refined routing with greatly connected components. Available menu and tabs to navigate between pages.
- Responsive layout. Consistent and pleasant UI that follows a mobile first approach, pages feel like parts of a whole.
- Enhanced experience. Filtration, Authentication with Firebase, Google Maps integration and web app deployment using Firebase Hosting.
- Replace the placeholder maps with and the actual stored cats' location
- Create a model that would allow users to display and interact with a bigger map
- Implement a search bar
- Move tabs to the top of the page for large screens
- Improve data handling and experience with virtual scrolling
- Require extra confirmation before deleting a cat from the database
I built this project with the advice and assistance of my Ironhack mentors: