jay1194/contact-card

The Contact Card app is a Progressive Web Application (PWA) that allows users to store contact information and profile pictures, and add, edit, and delete information as needed. This convenient single-page application can be used on any device, providing a seamless user experience both online and offline.

Full Stack Developer

Passionate about crafting seamless web experiences, I specialize in transforming ideas into user-centric digital solutions. With expertise in React, Node.js, and a keen eye for responsive design, I bring creativity and efficiency to every project. Let's collaborate and create something amazing together! 🚀

Skills & Tools

Connect with Me

contact-card's Issues

import Bootstrap into my webpack entry point

Acceptance criteria:

• It is done when bootstrap and @popper/core appear as dependencies in my client/package.json.

• It is done when I have imported the compiled Bootstrap module and needed plugins into the webpack entry point.

Add service worker using web pack and add user stories for each step

• Identify use cases of service workers in a PWA, add caching of all assets with Workbox's GenerateSW class, implement runtime caching, and use Workbox's InjectManifest class to generate a list of URLs to precache to add to an existing service worker.

User story:

• As an app user, I want my app to load quickly and to be able to view the app while offline.

Acceptance criteria:

• It is done when the service worker is registered and activated.

• It is done when I click offline and refresh the page, and the app still appears.

• It is done when I unregister the service worker and the app no longer appears when offline.

User story:

• As an app user, I want my app to load quickly and to be able to view the app while offline.

Acceptance criteria:

• It is done when a Workbox plugin is imported as a dev dependency in the client directory.

• It is done when the client/webpack.config.js file has been set up to require and implement the GenerateSW class of the Workbox plugin.

• It is done when the service worker is registered.

• It is done when I open the app in the browser and navigate to Chrome DevTools and the service worker is activated.

• It is done when I open the app in the browser and navigate to Chrome DevTools and a cache object has been created.

User story:

• As a developer, I want to only cache images as they are used.

Acceptance criteria:

• It is done when an exclude property has been added to exclude image files.

• It is done when a runtimeCaching property has been added to define caching strategies.

• It is done when a URLPattern property has been added to match image paths.

• It is done when a handler property has been added to employ a cache-first strategy.

• It is done when the options property is set so that the cacheName is ‘images’ and the max entries is 1.

User story:

• As a developer, I want to use Workbox to create a custom service worker.

Acceptance criteria:

• It is done when GenerateSW() has been removed from the webpack.config.js file.

• It is done when InjectManifest() is required in the webpack.config.js file.

• It is done when InjectManifest() is added as a plugin and the swSrc and swDest files are set.

• It is done when the provided service worker code is added to the root of the client/src directory.

User story:

• As a developer, I want to deploy my app to a production-like environment using Heroku staging environment.

Acceptance criteria:

• It is done when the app runs successfully when tested in the feature branch using heroku local web and no error message appears.

• It is done when the issue is closed and the work done in the feature branch has been merged to main.

• It is done when a Heroku staging app is successfully deployed from the main branch.

Audit Application with Lighthouse

User story:

• As a developer, I want to audit my application so that I can resolve any performance issues my application might have.

Acceptance criteria:

• It is done when I’ve run an audit over my application and read through the reports for the Performance, PWA, Best Practices, and Accessibility audits using the Lighthouse Extension documentation.

User story:

• As a developer, I want to deploy my application to a production environment so that the end user can use my application and I can continuously add new code to the development/staging environment without worrying about unintended consequences affecting the production deployment.

Acceptance criteria:

• It is done when the application is deployed to Heroku production.

Implement CRUD functionality to store contact data using the browser’s IndexedDB database

User story:

• As a developer, I want to read and write to an IndexedDB database so that I can meaningfully utilize data persisted within the IndexedDB database with my application.

Acceptance criteria:

• It is done when the application can read and output data stored in the IndexedDB database.

• It is done when the application can write, or POST, to the IndexedDB database.

• It is done when the application can create and store data in the IndexedDB database.

User story:

• As a developer, I want to render card elements using persisted data from the IndexedDB database so that users can see the data stored in the IndexedDB database.

• As a developer, I want to connect the form element to send data to the CREATE function so that new data can be inserted into the IndexedDB database.

Acceptance criteria:

• It is done when the application can read all data from IndexedDB database and display cards using that data.

• It is done when the application can create data and save, or POST, it to the IndexedDB database using the form element.

User story:

• As a developer, I want to click on the Delete button of each card element so that that card is no longer rendering and the data is no longer within the IndexedDB database.

Acceptance criteria:

• It is done when a Delete function is called upon clicking a Delete button and the associated card element is deleted from both the UI and the IndexedDB database.

User story:
As a developer, I want to click on the Edit button of each card element so that it is possible to edit each card.

Acceptance criteria:
It is done when an Edit function is called upon clicking an Edit button and the associated card element is updated through the form element, rendered to the UI, and updated in the IndexedDB database.

separate index.html generated when a dist directory is created

Acceptance criteria:

• It is done when an index.html file is generated and included in the dist directory when the webpack build process is run.

Deploy application to Heroku Staging

Configure the Contact Cards application to be installable by the end user

User story:

• As a developer, I want to configure and create a manifest.json so that I can supply metadata to my application.

Acceptance criteria:

• It is done when the application is able to utilize a manifest.json and when checking the Application tab of the developer tools, the manifest.json appears.

User story:

• As a developer, I want to make my application installable so that the end user can access the application on any device even without a stable internet connection.

Acceptance criteria:

• It is done when a new installation button is created on the UI and the logic is written such that the application can be installed locally.

import my CSS files directly into my client/src/js/index.js entry point.

Acceptance criteria:

• It is done when style-loader, css-loader, babel-loader, @babel/core, and @babel/preset-env appear as dev dependencies in the client package.json.

• It is done when a rule has been added in the client/webpack.config.js file that uses style-loader and css-loader to preprocess CSS files.

• It is done when the client/src/css/index.css file has been imported into the webpack entry point.

• It is done when JavaScript files can be transpiled using Babel.

Configure the application to use IndexedDB

User story:

• As a developer, I want to configure the application to use an IndexedDB database so that data can be persisted and queried.

Acceptance criteria:

• It is done when the application contains the code necessary to establish a connection to an IndexedDB database within a database.js file

Bundle my static files to improve my app’s performance.

Acceptance criteria:

• It is done when webpack and webpack command line tools are installed in the client directory.

• It is done when the private property in the package.json is set to true.

• It is done when an index.js file is added to the client/src/js directory.

• It is done when the form.js and submit.js files are imported into the index.js file.

• It is done when a webpack.config.js file appears at the root of the client directory.

• It is done when the script npm run build can be used to run a local copy of webpack via the command line.

deploy my app to a production-like environment during each stage of the build using a Heroku staging environment

Acceptance criteria:

• It is done when an engine key pair and Heroku build hook has been added to the root package.json.

• It is done when the app runs successfully when tested in the feature branch using heroku local web and no error message appears.

• It is done when the issue is closed and the work done in the feature branch has been merged to main.

• It is done when a Heroku staging app is successfully deployed from the main branch.

Convert application to use the client-sever model

Acceptance Criteria:

• GIVEN a contact card application, WHEN I open the application in an editor, THEN I should see the client-server folder structure

view logos and images in my app

Acceptance criteria:

• It is done when the logo appears in the top right of the app.

• It is done when the dog and bear profile images appear on the app’s form.