diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..fe2537033
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+bundle.js
+node_modules/
\ No newline at end of file
diff --git a/README.md b/README.md
index 769d13f72..85b1e77a5 100644
--- a/README.md
+++ b/README.md
@@ -1,37 +1,63 @@
# Chitter API Frontend Challenge
-* Feel free to use Google, your notes, books, etc. but work on your own
-* If you refer to the solution of another coach or student, please put a link to that in your README
-* If you have a partial solution, **still check in a partial solution**
-* You must submit a pull request to this repo with your code by 9am Monday morning
+This is a small Twitter clone that allows users to post messages to a public stream. The backend API is already provided and hosted on Heroku. The task is to build a front-end single-page application (SPA) to interface with the API.
-Challenge:
--------
+## Screenshot
-As usual please start by forking this repo.
+
-We are going to write a small Twitter clone that will allow the users to post messages to a public stream.
+## Ruby Version
-The scenario is similar to the [Chitter Challenge](https://github.com/makersacademy/chitter-challenge), except someone has already built a backend API for you and hosted it on Heroku.
+If you're interested in an alternative implementation of this project using Ruby, you can check out the [Ruby version](https://github.com/Shakhrai8/cyber-twitter).
-Your task is to build a front-end single-page-app to interface with this API. You can do this in any framework you like, or in pure Javascript. [The API documentation is here.](https://github.com/makersacademy/chitter_api_backend)
+The Ruby version includes both the backend and frontend components, and utilizes a database for data storage. It provides similar features to the JavaScript version, allowing users to create accounts, post peeps, view and delete peeps, and more. Feel free to explore and compare the two implementations.
-Here are some interactions the API supports. Implement as many as you see fit.
+## Features
-* Creating Users
-* Logging in
-* Posting Peeps
-* Viewing all Peeps *(I suggest you start here)*
-* Viewing individual Peeps
-* Deleting Peeps
-* Liking Peeps
-* Unliking Peeps
+The application includes the following features:
-We are looking for well tested, easy to read, easy to change code. This is more important than the number of interactions you implement.
+- Creating users
+- Logging in
+- Posting peeps
+- Viewing all peeps
+- Viewing individual peeps
+- Deleting peeps
+- Liking peeps
+- Unliking peeps
-Note that others may be doing the same task at the same time, so the data may change as you are using it.
+## Technologies Used
-## Utilities you might find useful
+The application has been developed using the following technologies:
-* [The Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) for making requests.
-* [Postman](https://www.getpostman.com/) or [Insomnia](https://insomnia.rest/) for exploring the API.
+- JavaScript
+- Jest (for testing)
+- HTML
+- CSS
+- Apis
+
+## Installation
+
+To run the application locally, follow these steps:
+
+1. Clone the repository: `git clone https://github.com/Shakhrai8/frontend-api-challenge.git`
+2. Navigate to the project directory: `cd frontend-api-challenge`
+3. Install the dependencies: `npm install`
+4. Build the application: `npm run build`
+5. Open the application: Open the `index.html` file in your preferred browser.
+
+## Usage
+
+Once the application is running, you can perform the following actions:
+
+1. **Creating Users**: Use the provided user interface to sign up and create a new user account.
+2. **Logging In**: Use the provided user interface to log in to your account.
+3. **Posting Peeps**: Enter your peep text in the input field provided and click the "Post Peep" button to post a new peep.
+4. **Viewing All Peeps**: The application displays all the peeps in the public stream. Scroll through the peeps to view them.
+5. **Viewing Individual Peeps**: Click on a peep to view its details, such as the peep content, creation date, author, and number of likes.
+6. **Deleting Peeps**: If you are the owner of a peep, a delete button will be displayed when viewing the peep details. Click the delete button to remove the peep.
+7. **Liking Peeps**: When viewing the details of a peep, click the "Like" button to like the peep.
+8. **Unliking Peeps**: If you have already liked a peep, the "Like" button will be changed to "Unlike". Click the "Unlike" button to remove your like from the peep.
+
+## Testing
+
+The application has been thoroughly tested using Jest to ensure its functionality and reliability. To run the tests, execute the command `jest`.
diff --git a/__tests__/chitterView.test.js b/__tests__/chitterView.test.js
new file mode 100644
index 000000000..a8d6ac6eb
--- /dev/null
+++ b/__tests__/chitterView.test.js
@@ -0,0 +1,375 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const ChitterPeep = require("../src/models/chitterPeep");
+const ChitterView = require("../src/views/chitterView");
+const ChitterUser = require("../src/models/chitterUser");
+const ChitterClient = require("../src/clients/chitterClient");
+const fs = require("fs");
+
+describe("ChitterView", () => {
+ it("calls fetch and loads repo info, and shows correct info in modal when peep is clicked", () => {
+ document.body.innerHTML = fs.readFileSync("./index.html");
+
+ const mockClient = {
+ loadPeeps: jest.fn(),
+ loadPeepById: jest.fn(),
+ };
+
+ const mockModel = {
+ setPeeps: jest.fn(),
+ getPeeps: jest.fn(),
+ };
+
+ const view = new ChitterView(mockModel, mockClient);
+
+ const mockPeeps = [
+ {
+ id: 1,
+ user: { handle: "John" },
+ body: "Hello World",
+ created_at: "2023-06-20T12:34:56.789Z",
+ likes: [{ user: { handle: "Alice" } }],
+ },
+ {
+ id: 2,
+ user: { handle: "Smith" },
+ body: "Bye World",
+ created_at: "2022-07-20T12:34:56.789Z",
+ likes: [{ user: { handle: "Alice" } }],
+ },
+ ];
+
+ mockClient.loadPeeps.mockImplementationOnce((callback) => {
+ callback(mockPeeps);
+ });
+
+ mockClient.loadPeepById.mockImplementation((id, callback) => {
+ const peep = mockPeeps.find((peep) => peep.id === Number(id));
+ callback(peep);
+ });
+
+ mockModel.getPeeps.mockImplementationOnce(() => {
+ return mockPeeps;
+ });
+
+ view.displayPeepsFromApi();
+
+ expect(mockClient.loadPeeps).toHaveBeenCalledWith(expect.any(Function));
+ expect(mockModel.setPeeps).toHaveBeenCalledWith(mockPeeps);
+
+ const peepContainers = document.querySelectorAll(".peep");
+
+ peepContainers.forEach((peepContainer, index) => {
+ const peep = mockPeeps[index];
+ peepContainer.click();
+ setTimeout(() => {
+ expect(document.querySelector("#peepBody").textContent).toEqual(
+ peep.body
+ );
+ expect(document.querySelector("#peepCreated").textContent).toBe(
+ `Created at: ${new Date(mockPeep.created_at).toLocaleString()}`
+ );
+
+ expect(document.querySelector("#peepAuthor").textContent).toBe(
+ `Author: ${peep.user.handle}`
+ );
+ expect(document.querySelector("#peepLikes").textContent).toBe(
+ `Likes: ${peep.likes.length}`
+ );
+ }, 0); // a small delay
+ });
+ });
+
+ describe("handleSignup", () => {
+ it("should sign up a user successfully", () => {
+ const mockUser = new ChitterUser("testUser", "testPassword");
+
+ const mockClient = {
+ signupUser: jest.fn((user, callback) => {
+ // Simulate successful signup by calling the callback with the user data
+ callback(mockUser);
+ }),
+ };
+
+ const view = new ChitterView({}, mockClient);
+
+ // Mock the prompt function to provide user input
+ jest
+ .spyOn(window, "prompt")
+ .mockReturnValueOnce("testUser")
+ .mockReturnValueOnce("testPassword");
+
+ // Call the handleSignup method
+ view.handleSignup();
+
+ // Expect the signupUser method to be called with the mockUser object
+ expect(mockClient.signupUser).toHaveBeenCalledWith(
+ mockUser,
+ expect.any(Function)
+ );
+
+ // Expect the user property of the view to be set with the mockUser object
+ expect(view.user).toEqual(mockUser);
+ });
+ });
+
+ describe("handleLogin", () => {
+ it("should log in a user successfully", () => {
+ const mockUser = new ChitterUser("testUser", "testPassword");
+
+ const mockClient = {
+ loginUser: jest.fn((user, callback) => {
+ // Simulate successful login by calling the callback with session_key and user_id
+ callback({ session_key: "testSessionKey", user_id: 1 });
+ }),
+ };
+
+ const view = new ChitterView({}, mockClient);
+
+ // Mock the prompt function to provide user input
+ jest
+ .spyOn(window, "prompt")
+ .mockReturnValueOnce("testUser")
+ .mockReturnValueOnce("testPassword");
+
+ // Call the handleLogin method
+ view.handleLogin();
+
+ // Expect the loginUser method to be called with the mockUser object
+ expect(mockClient.loginUser).toHaveBeenCalledWith(
+ {
+ handle: "testUser",
+ password: "testPassword",
+ sessionKey: "testSessionKey",
+ userId: 1,
+ },
+ expect.any(Function)
+ );
+
+ // Expect the user property of the view to be set with the mockUser object
+ expect(view.user).toEqual({
+ handle: "testUser",
+ password: "testPassword",
+ sessionKey: "testSessionKey",
+ userId: 1,
+ });
+ });
+ });
+
+ it("should create a peep successfully", () => {
+ // Mock user data
+ const mockUser = {
+ userId: 1,
+ sessionKey: "testSessionKey",
+ };
+
+ // Mock client
+ const mockClient = {
+ loadPeeps: jest.fn(),
+ createPeep: jest.fn((peep, sessionKey, callback) => {
+ // Simulate successful creation by calling the callback with the peep data
+ callback({
+ peepId: 1,
+ body: peep.body,
+ created_at: "2023-06-23T13:21:23.317Z",
+ });
+ }),
+ };
+
+ // Mock view
+ const view = new ChitterView({}, mockClient);
+ view.user = mockUser;
+ view.peepInput.value = "Test peep";
+
+ // Call the handleCreatePeep method
+ view.handleCreatePeep();
+
+ // Expect the createPeep method to be called with the correct arguments
+ expect(mockClient.createPeep).toHaveBeenCalledWith(
+ {
+ user_id: mockUser.userId,
+ body: "Test peep",
+ },
+ mockUser.sessionKey,
+ expect.any(Function)
+ );
+
+ // Expect the peep input to be cleared
+ expect(view.peepInput.value).toBe("");
+ });
+
+ describe("handlePeepClick", () => {
+ it("should load peep details and display them in the modal", () => {
+ // Mock local storage
+ global.localStorage = {
+ getItem: jest.fn().mockImplementation(() => null),
+ };
+
+ // Mock peep data
+ const mockPeep = {
+ id: 1,
+ user: { handle: "John" },
+ body: "Hello World",
+ created_at: "2023-06-20T12:34:56.789Z",
+ likes: [{ user: { handle: "Alice" } }],
+ };
+
+ // Mock client
+ const mockClient = {
+ loadPeepById: jest.fn((peepId, callback) => {
+ // Simulate successful loading of peep details by calling the callback with the mockPeep object
+ callback(mockPeep);
+ }),
+ };
+
+ // Mock view
+ const view = new ChitterView({}, mockClient);
+
+ // Mock the modal elements
+ document.body.innerHTML = `
+
+
+
+
+
+
+
+ `;
+
+ // Mock the event and peepContainer
+ const event = {
+ currentTarget: {
+ dataset: {
+ peepId: "1",
+ },
+ },
+ };
+
+ const peepContainer = document.createElement("div");
+ peepContainer.classList.add("peep");
+ peepContainer.dataset.peepId = "1";
+
+ // Call the handlePeepClick method
+ view.handlePeepClick(event);
+
+ // Expect the loadPeepById method to be called with the correct peepId
+ expect(mockClient.loadPeepById).toHaveBeenCalledWith(
+ "1",
+ expect.any(Function)
+ );
+
+ // Expect the modal content to be updated with the peep details
+ expect(document.querySelector("#peepBody").textContent).toBe(
+ mockPeep.body
+ );
+ expect(document.querySelector("#peepCreated").textContent).toBe(
+ `Created at: ${new Date(mockPeep.created_at).toLocaleString()}`
+ );
+
+ expect(document.querySelector("#peepAuthor").textContent).toBe(
+ `Author: ${mockPeep.user.handle}`
+ );
+ expect(document.querySelector("#peepLikes").textContent).toBe(
+ `Likes: ${mockPeep.likes.length}👍`
+ );
+ });
+ });
+
+ describe("handleLike", () => {
+ it("should like a peep successfully", () => {
+ document.body.innerHTML = fs.readFileSync("./index.html");
+
+ const mockUser = {
+ userId: 1,
+ sessionKey: "testSessionKey",
+ handle: "testUser",
+ };
+
+ const mockClient = {
+ likePeep: jest.fn((peepId, userId, sessionKey, callback) => {
+ // Simulate successful liking of peep
+ callback({});
+ }),
+ };
+
+ const view = new ChitterView({}, mockClient);
+ view.user = mockUser;
+
+ // Call the handleLike method
+ view.handleLike(1, {});
+
+ // Expect the likePeep method to be called with the correct arguments
+ expect(mockClient.likePeep).toHaveBeenCalledWith(
+ 1,
+ mockUser.userId,
+ mockUser.sessionKey,
+ expect.any(Function)
+ );
+ });
+ });
+
+ describe("handleUnlike", () => {
+ it("should unlike a peep successfully", () => {
+ document.body.innerHTML = fs.readFileSync("./index.html");
+
+ const mockUser = {
+ userId: 1,
+ sessionKey: "testSessionKey",
+ handle: "testUser",
+ };
+ const mockClient = {
+ unlikePeep: jest.fn((peepId, userId, sessionKey, callback) => {
+ // Simulate successful unliking of peep
+ callback({});
+ }),
+ };
+
+ const view = new ChitterView({}, mockClient);
+ view.user = mockUser;
+
+ // Call the handleUnlike method
+ view.handleUnlike(1, {});
+
+ // Expect the unlikePeep method to be called with the correct arguments
+ expect(mockClient.unlikePeep).toHaveBeenCalledWith(
+ 1,
+ mockUser.userId,
+ mockUser.sessionKey,
+ expect.any(Function)
+ );
+ });
+ });
+
+ describe("handleDeletePeep", () => {
+ it("should delete a peep successfully", () => {
+ const mockUser = {
+ userId: 1,
+ sessionKey: "testSessionKey",
+ handle: "testUser",
+ };
+
+ const mockClient = {
+ loadPeeps: jest.fn(),
+ deletePeep: jest.fn((peepId, sessionKey, callback) => {
+ // Simulate successful deletion of peep
+ callback({});
+ }),
+ };
+
+ const view = new ChitterView({}, mockClient);
+ view.user = mockUser;
+
+ // Call the handleDeletePeep method
+ view.handleDeletePeep(1);
+
+ // Expect the deletePeep method to be called with the correct arguments
+ expect(mockClient.deletePeep).toHaveBeenCalledWith(
+ 1,
+ mockUser.sessionKey,
+ expect.any(Function)
+ );
+ });
+ });
+});
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..3fc140318
--- /dev/null
+++ b/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+ CHITTER
+
+
+