Pin-It! Web Application - Kenny Nguyen

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -1,11 +1,129 @@
-<img src="https://media2.giphy.com/media/Nx0rz3jtxtEre/giphy.gif?cid=ecf05e47k1el00v2wbzxdaemqy93cxosmaf6bp2r9trzlc03&rid=giphy.gif&ct=g"/>
+<div id="top"></div>
+  <h3 align="center">Pin - It</h3>
 
-If you're looking for a job, head on over to [PROMPT.md](./PROMPT.md).
+  <p align="center">
+    A web application by: Kenny Nguyen
+    <br />
+    <a href="https://github.com/knguyen111601/pantheon_labs_backend"><strong>Backend API I Made»</strong></a>
+    <br />
+    <a href="https://jovial-bhaskara-64e864.netlify.app/">View Demo</a>
+  </p>
+</div>
 
 
-</br></br></br></br>
 
-<!-- Delete this line and everything above it -->
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#built-with">Built With</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#installation">Installation</a></li>
+      </ul>
+    </li>
+    <li><a href="#contact">Contact</a></li>
+    <li><a href="#acknowledgments">Acknowledgments</a></li>
+  </ol>
+</details>
 
-# `Your App Name Here`
-Add some pretty documentation here that tells us how to start your app so we can see the awesome thing you built!
+
+
+<!-- ABOUT THE PROJECT -->
+## About The Project
+
+![Pin-It Screenshot](https://i.imgur.com/8e7MeYR.png)
+
+Pin-It is a web application in which users can let their imagination and passions run wild. Pin-it allows users to have full CRUD capabilities for their own personal pins and collections. Users can post their pins publicly and share them with others. Also, they are able to add any pins to collections that they've created.
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+
+
+### Built With
+
+* [React.js](https://reactjs.org/)
+* [TypeScript](https://www.typescriptlang.org/)
+* [Chakra UI](https://chakra-ui.com/)
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+
+
+<!-- GETTING STARTED -->
+## Getting Started
+
+### Installation
+
+_Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services._
+
+1. Clone the repo
+   ```sh
+   git clone https://github.com/knguyen111601/Software-Engineer-II.git
+   ```
+2. Install NPM packages
+   ```sh
+   npm install
+   ```
+3. Start the application
+   ```sh
+   npm start
+   ```
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+## Usage
+
+### Creating Pins
+Below is an example of the modal that reveals upon creating a pin. 
+* ![Pin](https://i.imgur.com/Xjjm4ao.png)
+
+### Creating Collections
+Below is an example of the modal for creating collections. Collections will hold any pins you decide to save.
+* ![CollectionModal](https://i.imgur.com/SrVvIYd.png)
+
+### Search Function
+Below is an example of using the search function. Here, we are searching "pina co..." and we discover entries show below, live.
+* ![Search](https://i.imgur.com/rXVDSRr.png)
+
+### Pin Show Page
+Below is an example of the show page for one of the pins posted to the app. The app will check for whether or not this is your pin and allow you to edit or delete it!
+* ![ShowPin](https://i.imgur.com/Q5fT3jd.png)
+
+### Edit Modal
+Below is an example of the modal that allows you to edit the pins you created. This will look very similar to the edit modal for collections as well.
+* ![Edit](https://i.imgur.com/qLsm8pt.png)
+
+### Adding pins to a collection
+Below is an example of what happens when you decide to add a pin to a collection
+* ![Edit](https://i.imgur.com/hztKSCl.png)
+
+
+
+## Contact
+
+Kenny Nguyen - [LinkedIn](https://www.linkedin.com/in/kennydev/) - knguyen111601@gmail.com
+
+Project Link: [GitHub](https://github.com/knguyen111601/Software-Engineer-II/tree/master)
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+
+
+<!-- ACKNOWLEDGMENTS -->
+## Acknowledgments
+
+Some additional resources that contributed to the making of this project
+
+* [Font Awesome](https://fontawesome.com)
+* [React Icons](https://react-icons.github.io/react-icons/search)
+
+<p align="right">(<a href="#top">back to top</a>)</p>
+
+>>>>>>> frontend/master