Building an Online Store: My Journey as a Web Developer

Introduction

As a web development student at Flatiron School, I recently completed my Phase 1 project, a single-page online store website because I'm learning Front End. This project aimed to provide visitors with the ability to select products, place orders, and subscribe to our email list. Adhering to the project requirements, the orders and subscribers lists were all displayed on the same page, resulting in a seamless user experience.

Inspiration and Creation

The idea for this web page came to me while brainstorming project concepts. I was inspired to develop a fully functional web page from scratch. It was a thrilling challenge, and I wanted to create an online store that combined both front-end design and back-end functionality.

Technologies Utilized

To bring my vision to life, I employed a combination of technologies, including:

• HTML: Laying the foundation for the web page's content.
• CSS: Styling the page and enhancing its visual appeal.
• JavaScript: Adding interactivity and functionality.
• Bootstrap and Font Awesome: Utilizing these libraries for modern designs and icons, respectively.

Overcoming Challenges

Throughout the development process, I faced a few challenges that tested my problem-solving skills:

1. Implementing a Local Database

Initially, I lacked a database to store data. To overcome this, I sought guidance from my instructor, and together, we set up a local database using a db.json file. We created three components to store products, orders, and subscribers:

{
  "Products": [
    { "product#1" },
    { "product#2" }
  ],
  "Orders": [
    { "order#1" },
    { "order#2" }
  ],
  "Subscribers": [
    { "subscriber#1" },
    { "subscriber#2" }
  ]
}

To start the server, we ran json-server --watch db.json in the project directory.

2. Styling and Layout

Rendering the products into the designated div posed another challenge. I researched on Google and discovered that changing the display property in CSS resolved the issue:

div {
  display: inline-block;
  /* Other properties */
}

3. Create the input and the label

Additionally, Another difficult part was to create the label and the inputs and make them display properly.

I experimented with two methods to create labels and inputs and ensure a clean display:

Method 1:

Created the input elements inside the label elements.

<div class="labelAndInput">
<label for="street">Street <br><input type="text" id="street" name="street" required placeholder="Street" autocomplete="address-level1"></label>
<label for="city">City <br><input type="text" id="city" name="city" required placeholder="City"></label>
</div>

With that method, I did not make any Css styling, and everything was displayed as needed.

Method 2:

The other way is to create a div element for every label and its input as follows:

<div class="labelAndInput">
<div class="credit-card-number pay">
  <label for="creditCard">Credit card number</label><br>
  <input type="number" id="creditCard">
</div>
<br><div class="expiration-date pay">
 <label for="expiration">Expiration</label><br>
 <input type="text" id="expiration">
</div>
</div>

For Method 2, I applied custom CSS styles to achieve the desired layout.

Future Plans

Moving forward, I intend to expand this project by implementing the back-end and creating multiple pages instead of a single page. I aim to deploy the project online, allowing users to interact with real products. If you're interested in contributing or providing feedback, feel free to fork the project on GitHub.
Github

Conclusion

This marks the completion of my very first project in my journey to become a web developer. I'm excited about the possibilities that lie ahead and the growth I will experience throughout this immersive learning experience. Feedback from the community and fellow developers is greatly appreciated, especially as I embrace the role of a beginner in this vast and ever-evolving field.

Thank you for reading!

---