• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

Webdesigner Javascript Python React Web developer

Itutorial

Excellent OT User
Joined
Dec 23, 2014
Messages
2,307
Solutions
68
Reaction score
981
If anyone is interested in using some of the most modern website development tools for their game/server I am open and looking for work.

I can offer the latest tools for front-end and backend development. Including modern styles of database data encryption. CSRF protection and responsive website designs. Gone are the days of waiting for webpages to load, losing form data, and having to deal with annoying interaction with websites.

As for cost, it comes down to the job you are asking for.
 
Last edited:
Is it intended that's not minified/obfuscated dev build?

JavaScript:
const READ_USERS = "/user"
const READ_USER = "/user/:userId"
const READ_USER_FOLLOWERS = "/user/:userId/followers"



export const getUser = () => async (dispatch) => {
    const data = await fetch("/api")
    if (data.ok) {
        const response = await data.Json()
        dispatch(readUser(response))
        return response
        // } else if (response.status < 500) {
        //     const data = await response.json();
        //     if (data.errors) {
        //         return data.errors;
        //     }
        // } else {
        //     return ["An error occurred. Please try again."];
    }
}

export const isValidEmail = (email) => async (dispatch) => {
    const res = await fetch(`/api/users/checkEmail`, {
        method: 'POST',
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({email})
    })

    const data = await res.json();
    return data;
}



export const getUserById = (userId) => async (dispatch) => {
    const data = await fetch(`/api/${userId}`)

    const user = await data.json()

    dispatch(readUser(user))
    return user
}
export const readUsers = (user) => ({
    type: READ_USERS,
    payload: user
})

export const readUser = (user) => ({
    type: READ_USER,
    payload: user
})

export const readUserFollowers = (followers) => ({
    type: READ_USER_FOLLOWERS,
    payload: followers
})



export const getUserFollowers = (userId) => async (dispatch) => {
    const data = await fetch(`/api/users/${userId}/followers`)

    const followers = await data.json()

    dispatch(readUserFollowers(followers))
    return followers
}


let initialState = { allUsers: {}, singleUser: {} }
export default function userReducer(state = initialState, action) {
    let newState = {}
    switch (action.type) {
        case READ_USERS:
            newState = { ...state, allUsers: {} }

            action.payload.forEach(user => newState.allUsers[user.id] = user)
            return newState

        case READ_USER:
            newState = { ...state, singleUser: {} };
            newState.singleUser = action.payload
            return newState

        case READ_USER_FOLLOWERS:
            newState = { ...state };
            newState.followers = action.payload["followers"]
            return newState



        default:
            return state;
    };

}

JavaScript:
// constants
const CREATE_POST = "/posts/new";
const DELETE_POST = "/posts/:postId";
const UPDATE_POST = "/posts/:postId/edit";
const READ_POSTS = "/posts";
const READ_POST = "/posts/:postId";
const LIKE_POST = "/posts/:postId/likes"



export const createPosts = (post) => ({
    type: CREATE_POST,
    payload: post
})

export const createPost = (post, userId) => async (dispatch) => {
    const { post_title, imageURL, post_text } = post
    const data = await fetch(`/api/users/${userId}/posts`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            post_title,
            imageURL,
            post_text,
        })
    })
    if (data.ok) {
        const response = await data.json()
        dispatch(createPosts(response))
        return response
    }
    return data;
}

export const deletePosts = (id) => {
    return {
        type: DELETE_POST,
        id
    }
}

export const deletePost = (id) => async (dispatch) => {
    const response = await fetch(`/api/posts/${id}`, {
        method: "DELETE",
    })
    dispatch(deletePosts(id));
    dispatch(getPosts())
    return response
}

export const updatePosts = (post) => {
    return {
        type: UPDATE_POST,
        payload: post
    }
}

export const updatePost = (id, postDetails) => async (dispatch) => {
    const { post_title, imageURL, post_text } = postDetails
    const data = await fetch(`/api/posts/${id}`, {
        method: "PUT",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            post_title,
            imageURL,
            post_text
        }),
    });
    if (data.ok) {
        const response = await data.json();
        dispatch(updatePosts(response));
        return response;
    };
    return data;
    // else if (response.status < 500) {
    //     const data = await response.json();
    //     if (data.errors) {
    //         return data.errors;
    //     }
    // } else {
    //     return ["An error occurred. Please try again."];
    // }
}

export const readPosts = (posts) => ({
    type: READ_POSTS,
    payload: posts
})

export const getPosts = () => async (dispatch) => {
    const data = await fetch("/api/posts")
    if (data.ok) {
        const response = await data.json()
        dispatch(readPosts(response))
        return response
    }
    // else if (response.status < 500) {
    //     const data = await response.json();
    //     if (data.errors) {
    //         return data.errors;
    //     }
    // } else {
    //     return ["An error occurred. Please try again."];
    // }
}

//get user liked posts
export const getUserLikedPosts = (userId) => async (dispatch) => {
    const data = await fetch(`/api/users/${userId}/liked-posts`)
    if (data.ok) {
        const response = await data.json()
        dispatch(readPosts(response))
        return response
    }
}

export const readPost = (post) => ({
    type: READ_POST,
    payload: post
})

export const getUser = (userId) => async (dispatch) => {
    const data = await fetch(`/api`)

    if (data.ok) {
        const posts = await data.json()
        dispatch(readPost(posts))
        return posts
    }
    return data
}

export const createLike = (post) => {
    return {
        type: LIKE_POST,
        post
    }
}

export const likePost = (user_id, postId) => async (dispatch) => {
    const res = await fetch(`/api/posts/${postId}/likes`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            user_id,
            postId
        })
    })

    if (res.ok) {
        const post = await res.json();
        dispatch(createLike(post))
    }
}

export const createCommentThunk = (postId, user_id, comment) => async (dispatch) => {
    const res = await fetch(`/api/posts/${postId}/comments`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            user_id,
            comment
        })
    });

    if (res.ok) {
        const data = await res.json();
        dispatch(getPosts());
        return data;
    };
    return res;
};

export const updateCommentThunk = (commentId, comment) => async (dispatch) => {
    const res = await fetch(`/api/comments/${commentId}`, {
        method: "PUT",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            comment
        })
    });

    if (res.ok) {
        dispatch(getPosts());
    };
    return res;
};

export const deleteCommentThunk = (commentId) => async (dispatch) => {
    const res = await fetch(`/api/comments/${commentId}`, {
        method: "DELETE",
    });

    if (res.ok) {
        dispatch(getPosts());
    };
    return res;
};



const initialState = { allPosts: {}, singlePost: {} }

export default function postReducer(state = initialState, action) {
    let newState = { ...state }
    switch (action.type) {
        case READ_POSTS:
            const variable = action.payload.reduce((acc, post) => {
                acc[post.id] = post
                return acc
            }, {})
            newState.allPosts = variable
            return newState

        case READ_POST:
            newState.singlePost = action.payload
            return newState

        case CREATE_POST:
            newState.allPosts[action.payload.id] = action.payload
            return newState

        case DELETE_POST:
            delete newState[action.payload.id]
            return newState

        case UPDATE_POST:
            newState.allPosts[action.payload.id] = action.payload
            return newState

        case LIKE_POST:
            newState.allPosts[action.post.id] = action.post
            return newState

        default:
            return state;
    };
}

I guess it's POC so there's not much of backend validation in place:
JavaScript:
    await fetch("/api/auth/login", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            email: "aaaaxd.pl",
            password: "111111",
        }),
    });
 
Last edited:
Not sure what you are asking. It is intended to be as it is because this isn't an actual project. It does show case the functionality that can be done on the clients side which is all I was going for. By no means is this something that would be ready for production.
 
Just saying that usally even for such demo pages things are usaully being built as "production build" so the code is obfuscated/minified or without source map files.
Just saying, anyway I like the idea to push OT scene towards new web technologies & things like webSockets with some dose of security like CSRF/tokens etc. But honestly people who're interested in such things are usually programmers who can do things on their own, so I guess price would need to be really low (or maybe I'm wrong :) )
 
await fetch("/api/auth/login", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ email: "aaaaxd.pl", password: "111111", }), });
Yes that is true. There is a lot that would be needed for this project to be ready for production. Again the real idea is just to show what the front-end can look like for users.

You would be able to do a lot of things to this demo website using .fetch in your browser.
 
@Itutorial Okay it was a bit missleading to read about security and see such unprotected API but as it's only frontend showcase, now I get what was the intentions, keep goin ;)
 
Just saying that usally even for such demo pages things are usaully being built as "production build" so the code is obfuscated/minified or without source map files.
Just saying, anyway I like the idea to push OT scene towards new web technologies & things like webSockets with some dose of security like CSRF/tokens etc. But honestly people who're interested in such things are usually programmers who can do things on their own, so I guess price would need to be really low (or maybe I'm wrong :) )
Yeah I suspected if anything someone would want just a couple features added into an already existing site like znote, ect. Mainly the JavaScript would be their interest I would imagine. I also seriously doubt redux would ever need to be used for a tibia server. Which is showcased in the project.

Agreed on the pricing.
 
Yeah I suspected if anything someone would want just a couple features added into an already existing site like znote, ect. Mainly the JavaScript would be their interest I would imagine. I also seriously doubt redux would ever need to be used for a tibia server. Which is showcased in the project.

Agreed on the pricing.
That business model might work better for OT scene actually, as I see more & more download&host custom projects lead by people with rather basic experience/knowlage of coding trying to copy mechanics from highend servers ;)
 
Last edited:
@Itutorial Okay it was a bit missleading to read about security and see such unprotected API but as it's only frontend showcase, now I get what was the intentions, keep goin ;)
Now that you mention it I guess I will remove the project and link. Wouldn't want someone abusing the demo site
 
Back
Top