gsg-g8 / art-gallery Goto Github PK
View Code? Open in Web Editor NEWhttps://art-gallery-v1.herokuapp.com/
https://art-gallery-v1.herokuapp.com/
A component that lets the user upload background image and try our painting on his wall and resize it.
get painting data by id
relates #2
DELETE api/v1/paintings/:id
DELETE FROM product WHERE id = id;
{ StatusCode: 200,
data: { message: "painting deleted successfully" }
}
to be a successful test
Relates #2
GET /cart
Response
Testing
{ 200: ,data : { }}
{[400,500]: , message:" "}
POST /cart
Validation Schema
Request body
Response
Testing
{ 200: ,data : { }}
{[400,500]: , message:" "}
Relates #2
GET api/v1/profile/:artistId
get the artist information by ID
{ statusCode:200 ,data : [{
id,
first_name,
last_name,
email,
mobile_no,
reviews,
profile_img,
social_accounts,
budget,
bio
}] }
to be a successful test
Generate react app for the client using command
npx create-react-app
add .yml to the structure
ESLINT for the server
eslint
eslint-config-airbnb-base
eslint-plugin-import
eslint-config-prettier
eslint-plugin-prettier
eslint-plugin-flowtype
eslint-plugin-jsx-a11y
eslint-plugin-react
eslint-plugin-react-hooks
prettier
ESLINT for the react
eslint
eslint-config-airbnb
eslint-plugin-prettier
save-exact prettier
eslint-config-prettier
prettier
Relates #2
POST api/v1/signup
req.body = {
firstName,
lastName,
email,
password,
confirmPassword,
role (artist or user),
}
{
email: yup.string().alphanum().required(),
password: yup.string().min(8).required(),
confirmPassword: yup.string().ref('password'),
firstName: yup.string().required(),
lastName: yup.string().required(),
role: yup.string().required(),
}
{ statusCode:201 ,data : { } }
{statusCode:401, message:"Unauthorized"}
to be a successful test
filter paintings by categories on server (all ,......)
Initialize the express app by
setup express server on port 5000 and
import app.js on index.js and listen to our app
Also install morgan package to make HTTP request logger for node.js
Validation Schema
Request body
Response
Testing
{
title: yup.string().required(),
description: yup.string().required(),
category: yup.string().required(),
property: yup.string().required(),
countSold: yup.number().integer().positive().required(),
painting_img: yup.string().required(),
artistsId: yup.number().integer().positive().required(),
}
req.body = { title,
description,
category,
property,
countSold,
artistsId,
painting_img
}
{ statusCode: 201 , data: {artId, message: "Art Added Successfully} }
{statusCode: 400 , message:"Invalid Data "}
to be a successful test
status === 201
typeof(data) === "object"
controllers/
- index.js
- errorHandle/
- index.js
database/
utils/
app.js
index.js
.env
test/
.travis.yml
.gitignore
.eslintrc.json
package-lock.json
package.json
GET api/v1/paintings
{ statusCode:200,
data: [{
id,
title,
description,
category,
property,
countSold,
artistsId
}] }
{statusCode:400, message:" Bad Request"}
to be a successful test
Relates #2
PATCH api/v1/user/:id
req.body = {
socialMediaAccounts,
profileImg,
budget,
bio,
mobileNo,
}
{
budget: yup.number().round(),
}
{ statusCode:200 ,data : { } }
to be a successful test
Relates #2
PATCH api/v1/buy/:productId
This route when user buy product to update both budget for customer and artist and count_sold at product table
{ statusCode:200 ,data : { } }
to be a successful test
GET api/v1/auth
route to decode token and send userID and role
{ statusCode:200 ,data : {
userID,
role,
} }
Validation Schema
Request body
Response
Testing
{
details: yup.string().required(),
rate: yup.float().requird(),
artistsId: yup.number().integer().positive().required(),
}
req.body = {
details,
rate,
artistic,
}
{ statusCode: 201 , data: {rows} }
{statusCode: 400 , message:"Invalid Data "}
to be a successful test
status === 201
typeof(data) === "object"
GET /cart
Response
Testing
{ 200: ,data : { }}
{[400,500]: , message:" "}
DELETE /cart/:paintingsId
Response
Testing
{ 200: ,data : { }}
{[400,500]: , message:" "}
Some frontend routes have to be protected so in order to achieve this purpose we handled a backend route which send a response with status code 200 and user id and role if he is authorized to access this route, and a response of status code 401 and message Un-Authorize
if he wasn't authorized, We will check these responses and handle our frontend protected routes in response to them
I will try to use nodemailer
module in order to send an email to customer after buying a product.
Default state will be as follows:
state = {
customerDate: []
}
Then, when the components did mount and request the data from the API it will be as follows:
state = {
customerData:[
{
id: integer,
first_name: string,
last_name: string,
email: string,
budget: integer,
},
...
]
}
There are no props for this page
Create a component that renders paintings detail and let the user try painting on his wall
Route | Method | Description | Status |
---|---|---|---|
/paintings |
GET |
#13 | ๐ |
/paintings |
POST |
#16 | |
/paintings/:artistId |
GET |
#12 | ๐ |
/buy |
GET |
||
/paintings/:id |
DELETE |
#18 |
Route | Method | Description | Status |
---|---|---|---|
/cart/ |
GET |
#14 | |
/cart/ |
POST |
#17 | |
/cart/:paintingsId |
DELETE |
#19 |
Route | Method | Description | Status |
---|---|---|---|
/login |
POST |
#9 | ๐ |
/signup |
POST |
#10 | |
/logout |
GET |
#20 |
Route | Method | Description | Status |
---|---|---|---|
/profile/:artistId |
GET |
without password #21 | |
/profile/:userId |
GET |
without password #22 | |
/artist/:id |
PATCH |
to update artist profile | |
/user/:id |
PATCH |
to update user profile |
Route | Method | Description | Status |
---|---|---|---|
/review/:artistId |
GET |
without password #21 | |
/review/:userId |
POST |
without password #22 |
Relates #2
POST api/v1/login
req.body = {
email,
password,
role,
}
{
email: yup.string().alphanum().required(),
password: yup.string().min(8).required(),
}
{ statusCode:200 }
{statusCode:401, message:"Unauthorized"}
to be a successful test
Route | Protected? | Description | Issues |
---|---|---|---|
/login |
false | Login page | |
/signup |
false | sign up page | |
/ |
false | Home page | |
/cart |
true | cart page | |
/review |
false | review page | |
/art/:artId |
false | Specific art page | |
/artist/:artistId |
false | Specific artist page | |
/admin |
false | admin dashboard |
Relates #2
GET api/v1/profile/:userId
get the customer information by ID
{ statusCode:200 ,data : [{
id,
first_name,
last_name,
email,
mobile_no,
profile_img,
budget
}] }
to be a successful test
METHOD /full-route
Validation Schema
Request body
Response
Testing
{ statusCode: ,data : { }}
{statusCode: , message:" "}
Relates #2
PATCH api/v1/artist/:id
req.body = {
socialMediaAccounts,
profileImg,
budget,
bio,
mobileNo,
}
{
socialMediaAccounts: yup.array(),
profileImg: yup.string(),
budget: yup.number().round(),
bio: yup.string(),
mobileNo: yup.string(),
}
{ statusCode:200 ,data : { } }
to be a successful test
relates #2
GET api/v1/logout
res.clearCookie('token').redirect('/');
{ statusCode:200 ,
Location: '/login'
}
{statusCode:500,
message:"Internal Server Error"}
to be a successful test
Relates #2
GET api/v1/paintings/:artistId
get the artworks for specific artist by artist ID
{ statusCode:200 ,data : [{
id,
title,
description,
category,
property,
count_sold,
artisit_id,
}] }
to be a successful test
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.