fatima-hub333/appointment-diary

This is the Final Capstone Project, based on an app to book an appointment to try a motorcycle. This app built in ROR as a backend stack & React as a frontend stack. This is a mobile web application app. User can use it in mobile & desktop as well.

Hi there, I'm Fatima - aka Full-stack web developer 👋

I'm Mother, Developer, and Self-Learner!!

• 🌱 I’m currently learning everything 🤣
• 👯 I’m looking to collaborate with other developers
• 🥅 2022 Goals: Learn more about web development & enhance my coding skills
• ⚡ Fun fact: I love to work and play games

Connect with me:

         

Languages & Tools:

Certificates & Licenses

Github stats 📊

Visitor's count 👀

 

WakaTime Stats

I love connecting with different people so if you want to say hi, I'll be happy to meet you more! :)

appointment-diary's Issues

[.5pt][Frontend][Group-activity] set up router for navigation

• Set up routes in the App component
• Login: /
• SignUp: /sign_up
• Vehivles:/main
• DeleteVehicle:/vehicles
• VehicleDetails: /vehicles/:id/details
• Reserve:/vehicles/:id/reservation
• Reserve:/reservation
• MyReservations:/user/reservations

[1.5 pts][Backend] - Create User Model and Seeds

Create model:

• User:
  -Name: validates presence, validates: min length 6, max length 128
  -Role: validates presence

[1 pt][Backend] - Add devise and JWT

• Add devise for users w/migrations
• Update schema
• Add JWT
• Ensure jwt works with calls

[.5pt][Frontend] connect reserve action to API end point

• use the endpoint
  POST: /reservations

[.5pt][Frontend] add my sign_up jsx

• Require user name email and password and confirm_password

[1.5 pts][Backend] - Create Associations Model and Seeds

Create model:

• Associations:
  -User has many reservations, has many vehicles through reservations
  -Reservation belongs to user and belongs to vehicle
  -Vehicle has many reservations, has many users through reservations

[1pt][Frontend] create login and log out actions and reducers

• Create a login action with email and password
• reducer sets up user and JWT token

[1pt][Frontend] add login jsx

• Create a login with email and password

[.5pt][Frontend] connect list user reservations action to API end point

• use the endpoint
  GET: /reservations

[2pt][Frontend] add "Delete vehicle" styles

• match the general design of the table and buttons in
  https://user-images.githubusercontent.com/52020961/190396044-31ee96a5-009e-4111-a579-33348552914f.png

[1 pt][Backend] - Vehicles Controller Update Method

• Add method for vehicles controller:
• Update: update the vehicle (for admins only). add can? to check admin

[2pt][Frontend] add the reserve form styles

• match the design of
  https://user-images.githubusercontent.com/52020961/190395835-6ad2f179-a81d-4018-9d6a-5ac67ff30d0b.png

[1 pt][Backend] - Vehicles Controller Show Method

• Add method for vehicles controller:

• Show: returns one vehicle when the user clicks on it. add can? to check user and admins visibility

[.5pt][Frontend] connect delete vehicles action to API end point

• use the endpoint
  PATCH: /vehicles/:id

[1 pt][Backend] - Update Application Controller

• Add name and role to devise from the application controller

[.5 pts][Backend] - Add API routes/endpoints

• Add the routes to each controller method

[1pt][Frontend] create reducer and action for sign_up

• action signup receives user and password
• reduces set notification of success or messages of errors

[1 pt][Backend][Group Activity] - Repo Setup

• Create Rails API repo
• Set up the full environment for the repository

[.5pt][Frontend] connect login action to API end point

• use endpoint
  POST: /users/sign_in/

[2pt][Frontend] add vehicles view jsx

• On the main page, the user can see a list of vehicles
• When the user selects a specific item, they navigate to details page with its full description (skip the "Rotate image" button).

[1.5 pts][Backend] - Reservations Controller Index Method

• Create a controller for reservations:
  -Include method:
  -Index: returns every reservation for that user

[2pt][Frontend] add vehicles view styles

• style vehicles view to match the design
  https://user-images.githubusercontent.com/52020961/190394723-f969a5c5-82f6-40c5-ac18-fd2ea7dd5637.png

[.5pt][Frontend] add "Delete vehicle" jsx

• usercan see a list of all items with name and "Delete" button.
• When the vehicle is visible false is marked as removed

[2pt][Frontend] add "Add vehicle" styles

• match the general design of (if details view is merged try to reuse as much as possible)
  https://user-images.githubusercontent.com/52020961/190395111-24f280c6-d4b0-4029-b2be-b0ca0bc077c9.png

[.5pt][Frontend] add my reservations jsx

list of their reservations (with information about item name, date and city).

[2pt][Frontend] add navigation panel styles

• style the navigation panel to match the style
  https://user-images.githubusercontent.com/52020961/190394723-f969a5c5-82f6-40c5-ac18-fd2ea7dd5637.png

[.5pt][Frontend] connect get vehicle details action to API end point

• use the endpoint
  GET: /vehicles/:id

[1 pt][Backend] - Vehicles Controller Index Method

• Create a controller for vehicles:
  -Include method:
  -Index: returns every vehicle from the database

[1pt][Frontend] create reducer and action for add vehicle

• create action add vehicle that receives a name image, and price.
• create a reducer that adds it to the current list of all vehicles and list of visible vehicles

[.5pt][Frontend][Group-activity] create the redux structure according to the API

• Create store files for
  -reservations
  -vehicles
  -user
  -storage config file

• Add default dummy user value

[1pt][Frontend] create reducer and action for delete vehicle

• create an action that receives vehicle_id
• create reducer that updates the vehicle's visible value to false

[1 pt][Backend] - Vehicles Controller Create Method

• Add method for vehicles controller:

-Create: creates the vehicle itself on form submission (for admins only). add can? to check admin

[1pt][Frontend] add the reserve form jsx

• To reserve an appointment, the user has to select a date and city (username and selected item are autofilled).
• The user can also access the "Reserve" page from the navigation panel. In that case only username is autofilled.
• display errors messages

[1.5pts][Backend] - Add ability model

• Add cancancan gem
• Create ability model

[.5pt] [Frontend][Group-activity] set up the component files for login, home, add vehicle, remove vevicle, reserve, my reservations, navigation panel

• Create an empty Login component
• Create an empty SignUp component
• Create an empty navigationPanel component
• Create an empty Vehicles component
• Create an empty AddVehicle component
• Create an empty DeleteVehicle component
• Create an empty MyReservations component
• Create an empty Reserve component

[1 pt][Backend] - N + 1 optimization

• Add bullet gem
• Add .includes for every query that requires it

[1.5 pts][Backend] - Create Reservation Model and Seeds

Create model:

• Reservations:
  -Vehicle_id: validates the presence
  -User_id: validates presence
  -Date: validates the presence
  -City: validates the presence

[3 pts][Backend] - Add API documentation with Swagger

• Install rswag gem
• Add swagger configurations
• Swaggerize to create documentation/specs

[2pt][Frontend] add my reservations styles

• match the general design of the table
  https://user-images.githubusercontent.com/52020961/190396044-31ee96a5-009e-4111-a579-33348552914f.png

[1.5 pts][Backend] - Create Vehicle Model and Seeds

Create model:

• Vehicles:
  -Price: validates the presence
  -Name: validates the presence
  -Image: validates presence, file with stuff
  -Visible: validates the presence

[.5pt][Frontend] connect list all vehicles action to API end point

• use endpoint
  GET: /vehicles

[.5pt][Frontend]set up bootstrap

• set up bootstrap

[1pt][Frontend] add "Add vehicle" jsx

• To create a vehicle, the user has to add a name image, and price.
• the image should be previewed and turned into a base 64 encoded string.
• display errors messages

[.5pt][Frontend] add navigation panel jsx

In the navigation panel, the user can see links to:

• "Vehicles"
• "Reserve" form.
• "My reservations".
• "Add a vehicle.
• "Delete vehicle.

[.5pt][Frontend] connect list visible vehicles action to API end point

• use endpoint
  GET: /vehicles?visibility=public

[.5pt][Frontend][Group-activity] - Repo Setup

• Create React repo
• Set up the full environment for the repository

[.5pt][Frontend] connect add vehicles action to API end point

• use the endpoint
  POST: /vehicles

[2pt][Frontend] add login styles

• match the general style of the design
  https://user-images.githubusercontent.com/52020961/190404105-c765f75d-30aa-428a-ab35-6a060550e13e.jpg

[1pt][Frontend] create reducer and action for reserve vehicle

• create an action reserve that receives user_id, vehicle_id, city, and date
• reducer adds to the list of reservations

[.5 pts][Backend] - Reservations Controller Create Method

• Add method for reservations controller:
• Create: create the reservation