Web: https://ui-design-react-823qjzp9m.now.sh
Nos basamos en los estilos limpios y sencillos que encontramos en paginas del estilo como Airbnb, Booking y Qatar Airways pero también en otras paginas que nos resultaron agradables a la vista como mongodb y react, donde no utilizan muchos colores, sino que tienen generalmente 1 color principal y luego juegan con tonos de grises y el color blanco.
También lo que notamos en estas paginas de viajes, es que todas usan imagenes grandes o medianamente grades con poco texto, y toda la información te la brindan al ingresar en cada una de ellas por lo cual seguimos esa idea para el diseño de nuestro proyecto.
Por otro lado, decidimos no utilizar librerias que nos brindaran una Gallery la cual sería utilizada en el home sino que optamos por utilizar Cards y poder ajustarlo a lo que creemos ser una buena solución y fácil de extender si necesario.
- Clonar el repositorio
- Correr comando
yarn install
- Correr comando
yarn start
- Modificar web/apollo.js e indicar la nueva URL
Para utilizar la app mobile deberemos primero que nada pararnos en la carpeta app y correr npm install. Una vez realizado esto deberemos correr npm start o expo start parados en la carpeta de App. En caso de que nos aparezca un mensaje solicitando instalar expo-cli deberemos ingresar y una vez realizado estos pasos se nos abrira una web de expo en la cual tendremos varias opciones, una de ellas es usar la web pero donde no todas las funcionalidades sirven, otra opción es usar un emulador de android o ios y por ultimo tenemos la opcion de usar nuestro celular, para eso deberemos instalar la app de Expo y activar el modo desarrollador en el celular. Y ya podremos probar la app corriendo y ver sus funcionalidad. En caso de que los datos no aparezcan tendremos que cambiar la uri para que apunte a nuestro IP local, actualmente esta apuntando al servidor de vercel, para poder correr la API, para ello hay que ir a App/client.js y en httpLink cambiar la url por su ip local, como ejemplo: http://LA IP:3000/api/graphql. Luego deberemos ejecutar now dev parados en la raiz del proyecto y por otro lado volver a ejecutar npm start o expo start parados en la carpeta App.
Para ingresar se puede utilizar el usuario: diegobalbi1993@gmail.com y contraseña: password
- npm install @material-ui/core
- npm install --save styled-components
- npm install formik --save
- npm install -S yup
- npm install mongoose
- npm install --save graphql
const { gql } = require("apollo-server-micro");
const typeDefs = gql`
type Query {
user(id: ID!): User
users: [User]
trip(id: ID!): Trip
trips(userId: ID!): [Trip]
tripsPlaces(tripId: ID!): [TripPlace]
continents: [Continent]
regions: [Region]
region(id: ID!): Region
place(id: ID!): Place
placesByContinent(continentId: ID!): [Place]
placesByRegion(regionId: ID!): [Place]
activities(placeId: ID!): [Activity]
images(placeId: ID!): [Image]
image(placeId: ID!): Image
reviews(placeId: ID!): [Review]
}
type Trip {
id: ID
name: String!
userId: ID!
tripPlaces: [TripPlace]
}
type TripPlace {
id: ID
tripId: ID!
placeId: ID!
place: Place
}
type User {
id: ID
fullname: String!
email: String!
password: String!
token: String
}
type Continent {
id: ID
name: String!
places: [Place]
}
type Region {
id: ID
name: String!
places: [Place]
}
type Place {
id: ID
name: String!
description: String!
mainImageUrl: String!
continentId: ID!
regionId: ID
images: [Image]
activities: [Activity]
reviews: [Review]
}
type Activity {
id: ID
placeId: String!
name: String!
price: Int!
}
type Image {
id: ID
placeId: String!
url: String!
}
type Review {
id: ID
userId: ID!
placeId: ID!
rating: Int!
description: String!
user: User
}
type LoginResponse {
user: User
ok: Boolean!
error: String
}
type TripResponse {
trip: Trip
ok: Boolean!
error: String
}
type TripPlaceResponse {
tripPlace: TripPlace
ok: Boolean!
error: String
}
type Mutation {
login(input: LoginInput!): LoginResponse
register(input: RegisterInput!): User!
registerContinent(input: RegisterContinent!): Continent!
registerRegion(input: RegisterRegion!): Region!
registerPlace(input: RegisterPlace!): Place!
registerActivity(input: RegisterActivity!): Activity!
registerImage(input: RegisterImage!): Image!
registerReview(input: RegisterReview!): Review!
registerTrip(input: RegisterTrip!): TripResponse!
registerTripPlace(input: RegisterTripPlace!): TripPlaceResponse!
}
input RegisterTripPlace {
tripId: ID!
placeId: ID!
}
input RegisterTrip {
name: String!
userId: ID!
}
input LoginInput {
email: String!
password: String!
}
input RegisterInput {
fullname: String!
email: String!
password: String!
}
input RegisterContinent {
name: String!
}
input RegisterRegion {
name: String!
}
input RegisterPlace {
name: String!
description: String!
mainImageUrl: String!
continentId: ID!
regionId: ID
}
input RegisterActivity {
name: String!
price: Int!
placeId: ID!
}
input RegisterImage {
url: String!
placeId: ID!
}
input RegisterReview {
userId: ID!
placeId: ID!
rating: Int!
description: String!
}
`;
module.exports = typeDefs;