diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..565a12c --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2019 Jason Werner + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index 50d6bd5..52e5c56 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,22 @@ -# OneFraction +# FullStack -This is a platform I began building for a client. After he signed and I began building he decided to pivot and not pay me. Sometimes you get screwed in business but at least now I have a cool boilerplate to give away. +This is a platform I began building for a client. After he signed and I started working he decided to pivot and not pay me. Sometimes you get screwed in business but at least now I have a cool boilerplate to give away. -![onefraction.gif](https://i.imgur.com/IPbLdHy.gif) +[follow me on Twitter](https://twitter.com/TrillCyborg) - [follow the designer](https://twitter.com/traf) + +![fullstack.gif](https://i.imgur.com/jYb4YQL.gif) ## What is this? -OneFraction was supposed to a platform that gave users rewards for paying their rent through the platform as opposed to check or bank transfer. The value would come from leveraging data to eventually create a rental marketplace where users can find the perfect apartment to move into. +This project was supposed to be an app where users receive benefits for paying their rent through the platform as opposed to check or bank transfer. Since this repo rose to the top of _Hacker News_, _r/programming_ and _Github_ I have decided it deserves a new life. So allow me to reintroduce it as a full-stack boilerplate with my current top picks for tech I like to use on client work. + +If you're trying to expand into some of the technologies I'm using here, star it, fork it and start playing! Feel free to find my email at the bottom of [my site](https://trxrg.com/) and reach out with any questions. ## Stack ### Client -Built using `react-native-web` because its really cool and really easy to turn into a mobile app +Built using `react-native-web` because it's really cool and really easy to turn into a mobile app ### Server @@ -21,12 +25,31 @@ Accounts are set up using the wonderful `accounts.js` library. ### Generators -`type-graphql` and `graphql-codegen` are used to generate types for all my graphql resolvers to keep client and server totally and beautifully in sync. +`type-graphql` and `graphql-codegen` are used to generate types for all my GraphQL resolvers to keep client and server totally and beautifully in sync. ## Other cool things -I've included a number of animations using plain css and `react-spring`. If you're a react developer and want to animate your work learn `react-spring`. Thank me later. This project is using Plaid to access read info for users bank accounts. +I've included a number of animations using plain CSS and `react-spring`. If you're a react developer and want to animate your work learn `react-spring`. Thank me later. This project is using Plaid to access read info for users bank accounts and Google Place API for address lookup. + +## Usage + +To get this working right you'll need to create API keys for [Google Places](https://developers.google.com/places/web-service/intro) and [Plaid](https://plaid.com/). Then add them to the client and server config files. + +```sh +# Run mongo +sudo mongod + +# In ./server +yarn install +yarn watch + +# In ./client +cp ./src/config/example.env.json ./src/config/development.env.json +yarn install +yarn start +yarn gen:types:watch +``` ## License -MIT +[MIT](LICENSE) diff --git a/client/app.json b/client/app.json index a43ca77..93ab0e5 100644 --- a/client/app.json +++ b/client/app.json @@ -1,4 +1,4 @@ { - "name": "onefraction", - "displayName": "OneFraction" + "name": "fullstack", + "displayName": "FullStack" } diff --git a/client/src/assets/images/icons/rewards.svg b/client/src/assets/images/icons/rewards.svg deleted file mode 100644 index 60a3f1e..0000000 --- a/client/src/assets/images/icons/rewards.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - Rewards - Created with Sketch. - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/client/src/assets/images/logo-full.svg b/client/src/assets/images/logo-full.svg deleted file mode 100644 index 52f9f3a..0000000 --- a/client/src/assets/images/logo-full.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - Logo - Created with Sketch. - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/client/src/assets/images/logo-small.svg b/client/src/assets/images/logo-small.svg deleted file mode 100644 index 17f01dc..0000000 --- a/client/src/assets/images/logo-small.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - Logo - Created with Sketch. - - - - - - - - \ No newline at end of file diff --git a/client/src/components/MainLayout/MenuIcon.tsx b/client/src/components/MainLayout/MenuIcon.tsx index de24cd2..89e86b7 100644 --- a/client/src/components/MainLayout/MenuIcon.tsx +++ b/client/src/components/MainLayout/MenuIcon.tsx @@ -7,7 +7,7 @@ const Wrapper = styled(TouchableOpacity)` padding: 10px; position: fixed; right: 50px; - top: 56px; + top: 50px; ` const Icon = styled(Image)` diff --git a/client/src/components/MainLayout/Sidebar.tsx b/client/src/components/MainLayout/Sidebar.tsx index 1590a3d..dc3d5de 100644 --- a/client/src/components/MainLayout/Sidebar.tsx +++ b/client/src/components/MainLayout/Sidebar.tsx @@ -1,12 +1,11 @@ import * as React from 'react' -import { View, Image } from 'react-native' +import { View } from 'react-native' import styled from 'styled-components' -import logoSmall from '../../assets/images/logo-small.svg' +// import logoSmall from '../../assets/images/logo-small.svg' import { Link } from '../Router' import Button, { Variants as ButtonVariants } from '../Button' import SidebarItem from './SidebarItem' import dashbaordIcon from '../../assets/images/icons/dashboard.svg' -import rewardsIcon from '../../assets/images/icons/rewards.svg' import settingsIcon from '../../assets/images/icons/settings.svg' const Wrapper = styled(View)<{ open: boolean }>` @@ -22,13 +21,13 @@ const Wrapper = styled(View)<{ open: boolean }>` transition: transform 0.3s ease; ` -const Logo = styled(Image)` - width: 27px; - height: 36px; - position: absolute; - top: 50px; - right: 60px; -` +// const Logo = styled(Image)` +// width: 27px; +// height: 36px; +// position: absolute; +// top: 50px; +// right: 60px; +// ` interface SidebarProps { open: boolean @@ -37,15 +36,12 @@ interface SidebarProps { const Sidebar = ({ open }: SidebarProps) => ( - + {/* */} Dashboard - - Rewards - Settings diff --git a/client/src/config/example.env.json b/client/src/config/example.env.json new file mode 100644 index 0000000..42fef0b --- /dev/null +++ b/client/src/config/example.env.json @@ -0,0 +1,9 @@ +{ + "NODE_ENV": "development", + "GRAPHQL_URL": "http://127.0.0.1:4000", + "GOOGLE_MAPS_KEY": "xxxxxxxxxxx", + "PLAID_PUBLIC_KEY": "xxxxxxxxxxx", + "PLAID_PRODUCTS": "transactions", + "PLAID_COUNTRY_CODES": "US", + "PLAID_ENV": "sandbox" +} diff --git a/client/src/screens/Home/components/Dashboard.tsx b/client/src/screens/Home/components/Dashboard.tsx index 2f057cf..98cd25b 100644 --- a/client/src/screens/Home/components/Dashboard.tsx +++ b/client/src/screens/Home/components/Dashboard.tsx @@ -7,18 +7,18 @@ const Dashboard = () => ( - + - + - + - + { onLoadScript = () => { this.plaidHandler = Plaid.create({ - clientName: 'OneFraction', + clientName: 'FullStack', countryCodes: PLAID_COUNTRY_CODES.split(',') as PlaidCountryCodes[], env: PLAID_ENV, key: PLAID_PUBLIC_KEY, diff --git a/client/src/screens/Login/Login.tsx b/client/src/screens/Login/Login.tsx index 823a4b9..be81f2d 100644 --- a/client/src/screens/Login/Login.tsx +++ b/client/src/screens/Login/Login.tsx @@ -1,7 +1,7 @@ import * as React from 'react' -import { View, Image } from 'react-native' +import { View } from 'react-native' import styled from 'styled-components' -import logo from '../../assets/images/logo-full.svg' +// import logo from '../../assets/images/logo-full.svg' import TabBox, { Tabs } from './components/TabBox' import { useUserContext } from '../../screens/Login/UserContext' import LoginForm from './components/LoginForm' @@ -22,10 +22,10 @@ const LogoWrapper = styled(View)` top: 86px; ` -const Logo = styled(Image)` - width: 180px; - height: 46px; -` +// const Logo = styled(Image)` +// width: 180px; +// height: 46px; +// ` export const ContentWrapper = styled(View)` flex: 1; @@ -54,15 +54,13 @@ const Login = (props: any) => { const { logIn, signUp } = useUserContext() return ( - - - + {/* */} {path === Tabs.login ? ( { - await logIn(email, passowrd, isLandlord) + onSubmit={async (email, password) => { + await logIn(email, password, isLandlord) props.history.push('/') }} /> diff --git a/client/src/utils/config.ts b/client/src/utils/config.ts index b4dd49f..0d2e094 100644 --- a/client/src/utils/config.ts +++ b/client/src/utils/config.ts @@ -14,7 +14,7 @@ interface Config { export const Config: Config = { app: { - name: 'OneFraction', + name: 'FullStack', }, os: { android: 'android', diff --git a/package.json b/package.json new file mode 100644 index 0000000..a56bf7a --- /dev/null +++ b/package.json @@ -0,0 +1,9 @@ +{ + "name": "fullstack-boilerplate", + "version": "1.0.0", + "main": "index.js", + "repository": "git@github.com:TrillCyborg/fullstack.git", + "author": "Jason Werner ", + "license": "MIT", + "private": false +} diff --git a/server/.gitignore b/server/.gitignore index 096746c..aea8dc2 100644 --- a/server/.gitignore +++ b/server/.gitignore @@ -1 +1,2 @@ -/node_modules/ \ No newline at end of file +/node_modules/ +/config/local.json \ No newline at end of file diff --git a/server/config/default.json b/server/config/default.json index 58905ee..a7ea397 100644 --- a/server/config/default.json +++ b/server/config/default.json @@ -1,8 +1,8 @@ { "PORT": 4000, - "DB_NAME": "oneFraction", + "DB_NAME": "fullstack", "MONGO_HOST": "", - "ACCOUNTS_SECRET": "", + "ACCOUNTS_SECRET": "secret", "PLAID_CLIENT_ID": "xxxxxxx", "PLAID_SECRET": "xxxxxxx", "PLAID_PUBLIC_KEY": "xxxxxxx", diff --git a/server/config/local.json b/server/config/local.json deleted file mode 100644 index 3fa0b7d..0000000 --- a/server/config/local.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "PORT": 4000, - "DB_NAME": "oneFraction", - "MONGO_HOST": "", - "ACCOUNTS_SECRET": "979083ce-a9b6-483d-a899-ea22d5b0a1dd", - "PLAID_CLIENT_ID": "5cf92b434c3aa500121bfad9", - "PLAID_SECRET": "7bec015f38a285e9d48d8fd16ba79b", - "PLAID_PUBLIC_KEY": "3bc02bb8840d84f2e9b803add9191e", - "PLAID_PRODUCTS": "transactions", - "PLAID_COUNTRY_CODES": "US", - "PLAID_ENV": "sandbox" -}